Whenever I resize the browser window, I notice that the header and navigation bar do not fill up the entire width of the browser. This can be seen when shrinking the browser size. Ideally, I would like both the header and navigation bar to stretch till the end of the browser window.
However, everything looks fine when the browser is stretched!
Below is the HTML code snippet:
<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>
And this is the CSS code for styling:
/* 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;
}
Your feedback on what could be improved in my setup would be highly appreciated. Currently, I am also utilizing Eric Meyer's reset tool.