CODEWITHSUNDEEP
htmlcsswebresponsive-design
Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

Background color of the Navigation bar not taking the full width

I had designed a website : http://newyorkfairandlovely.com/ and it is responsive. But when the site is opened on a computer then the Background color of Navigation Bar is not displaying on the whole screen. The full size of the image is 1950px wide. When the screen is reduced to 1024px or smaller then it is OK. This is the css code:

nav { position: absolute; left: 0; background-color: #9362ae; float: left; width: 100%; margin: 0 auto; max-width: 1950px; font-family: "Source Sans Pro", Helvetica, sans-serif; }

Upvotes: 0

Views: 3070

Answers (3)

Travesty3
Travesty3

Reputation: 14479

Check your brackets. The rule you posted is nested under this:

@media 
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px)  {
    /* your rule is here */
}

So once the screen size increased to greater than 1224px, your rules are no longer applied.

This is an example of why it's a good idea to properly indent your code.

Upvotes: 1

Doge
Doge

Reputation: 345

What is the height/width of its parent elements? I believe you could make it cover the whole screen if the parents are all 100%. Also, try setting the margin-right to 0. (I also noticed you have a float:left; in your css, that might be part of the issue.

Upvotes: 0

LetterEh
LetterEh

Reputation: 26696

This should help:

body { margin : 0; padding : 0; }

Body has its own spacing from the HTML. Different browsers have different settings, but most have some space between the edges of the <html> and the <body>,
and typically using body { margin : __; }

Upvotes: 1

Related Questions