I am using the following header design, which should take over the top part of the page 100% horizontally but in some browsers on the right hand side it wouldn't cover it.
How can i fix this?
HTML:
<header id="loop">
<img src="/images/logo.png" height="50px" />
</header>
CSS:
background-color: #990000;
height: 85px;
margin-left: -8px;
margin-top: -8px;
position: relative;
width: 101.3%;
It's a bit hard to tell with no solid example.
Make sure that the body/header margin values:
body { margin: 0; }
Also, remove the width value you put in your css and reset your margins. Your CSS should be:
background-color: #990000;
height: 85px;
position: relative;
width: 100%;
The problem is your negative margin-left of 8px and the width of 101.3%. That fills the full width only when the screen width is more than 615px.
The best option is to get rid og the margin and use a width of 100%.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.