CODEWITHSUNDEEP
htmlcssheader
KPO
KPO

Reputation: 880

How can I make this header perfectly aligned?

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%;

Upvotes: 0

Views: 133

Answers (2)

hrr
hrr

Reputation: 1651

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%;

Upvotes: 2

Sven Bieder
Sven Bieder

Reputation: 5681

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%.

Upvotes: 0

Related Questions