I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then experimented with adjusting the position and increasing the width beyond 100%, only to end up with an unwanted horizontal scroll bar and residual white space on the right.
Here is the HTML code for the header:
<div id="header">
<img id="logo" src="images/logo.png" alt="">
<div id="nav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</div>
</div>
And here is the CSS styling for the header:
#header {
position: relative;
left: -9px;
bottom: 8px;
padding-top: 5px;
padding-bottom: 5px;
background: url(images/dark_dotted.png);
width: 105%;
text-align: center;
border-bottom: 4px orange solid;
}
#header #logo {
padding-right: 700px;
}
#nav {
position: relative;
bottom: 30px;
font-size: 28px;
right: -300px;
font-family: roboto;
}