I know there are a lot of 100% width posts but I can't seem to get an answer to my problem.

 

The site i'm working on is located here:

http://edgar.ldn.kualo.net/~lmpmeuk/web/busybees/

 

I want the navigation bar and footer bar at the bottom to span the whole width. As you will notice there is a slight spacing left and right of each to those bars.

 

 

    <header>
            <div class="container clearfix">
                <a href="/" title="Click here to go home" id="logo">
                <img src="img/logo-main.png" alt="logo">
                </a>
            </div>


                <nav>
                    <ul>
                        <li><a href="/about">About</a></li>
                        <li><a href="/products-and-prices">Products and Prices</a></li>
                        <li><a href="/gallery">Gallery</a></li>
                        <li><a href="/contact">Contact me</a></li>
                    </ul>
                </nav>
            
            <div class="container clearfix center-align">
            
                    <div id="hero-image">
                                    <a href="/">
                <img src="img/slider/kitchen_adventurer_cheesecake_brownie.jpg" alt="hero">
                </a>
                    </div>
            
            </div> <!--end hero container-->
        </header>
 

 

CSS:

 

 

footer {
    color: #333;
    background: #fdffac;
}


/* NAVIGATION */


nav {
    background: #ff7070;
}


nav ul {
    text-align: center;
    padding: 10px 20px 10px;
}


nav ul li {
    list-style: none;
    display: inline;
}


header nav ul li a {
    display: inline;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding: 20px;
}


header nav ul li a:hover {
    background: #ff7070;
    border-radius: 8px;
    font-weight:bold;


}


header nav ul li a:active {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0. inset;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0. inset;
    box-shadow: 0 0 5px rgba(0,0,0,0. inset;
}
 

 

 

If you give your body a margin:0; the nav takes ful width.

However, it is better to use a reset CSS for consistency across different browsers, here is a good one - http://meyerweb.com/eric/tools/css/reset/

Another thing is to give all element default margin and padding 0, like this

 

 

*{
    margin:0;
    padding:0;
}
 

Hope that helps