Home/ Questions/Q 9300867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T22:53:10+00:00

When I shrink the browser, the header and navigation bar does not extend till

  • 0

When I shrink the browser, the header and navigation bar does not extend till the end of the browser. It looks like this when I shrink the browser. I want the header and the navigation bar to extend till the end of the browser.
When shrinked

When the browser is stretched, it’s alright though! When browser is expanded

Here’s my html code :

<body>

<div id="header">
Some text
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>

Here’s the CSS for it:

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 100px;
     background: black;
     height:54px;
}

#nav li {
     float: left;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     margin-right: 94px;
     text-decoration: none;
}

Would really appreciate it if you could tell me what I’m doing wrong. I’m using Eric Meyer’s reset too.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

    #header{
    margin:0;
    background: white;
    height:90px;
    min-width:960px;
    width:100%;
}

    here you can specify the min-width:--;

    • 0