Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

navigation bar

Hi guys, here is the css code for my website. for some reason i have a 5px gap at the bottom left of the page between the nav bar and browser. any solutions?

html {
    font-family: arial;
    margin: 0;
    width: 100%;
}


h1 {
    font-size: 4em;
    margin: auto;
    font-weight: bold;
    text-align: center;
    margin-top: 210px;
    color: #000;


}


h2 {
    font-size: 1.6em; 
    color: #47B35B;
    text-align: center;
    margin: auto;
    margin-bottom: 40px;
}

/*-----navigation-----*/


.MenuContainer {
    height: 55px;
    width: 100%;
    bottom:0;
}
ul#navigation {
    height: 55px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #000;  
    text-align: center;

    font-size: 16px;
    font-family: 'Cham-WebFont', Arial, sans-serif;
    position: fixed;
    bottom: 0;
}
ul#navigation li {
    display: inline;
    margin-right: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li.last {
    margin-right: 0;
}
Richard Duncan
Richard Duncan
5,568 Points

If you right click on your nav bar and select inspect element in a Browser like Chrome, this will tell you what styles are being applied to that element. It may be that something is being inherited or applied by the browser or it may be that one of your rules is being ignored. Have a go at debugging it yourself it's the best way to learn.

3 Answers

Richard Duncan
Richard Duncan
5,568 Points

You have an 8px margin on your body element. Add body to your CSS as shown below and the footer will be flush to the browser.

html, body {
    font-family: arial;
    margin: 0;
    width: 100%;
}

Example here: http://jsbin.com/vakovaza/1/

Shaun Kelly
Shaun Kelly
35,560 Points

thanks

Richard Duncan
Richard Duncan
5,568 Points

No worries, as I say it's always worth inspecting the element and elements around it to see what styles are being applied that may be having an effect on what you are trying to achieve.

Arthur Verschaeve
Arthur Verschaeve
20,816 Points
Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Maybe you can post the html too?

Arthur Verschaeve
Arthur Verschaeve
20,816 Points
Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Maybe you can post the html too?

Shaun Kelly
Shaun Kelly
35,560 Points 
<!DOCTYPE HTML>
<html>

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Shaun Kelly</title>
      <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

<body>

        <h1>SHAUN KELLY</h1>

        <h2>Web Design & Developer</h2>


<div id="MenuContainer">
        <ul id="navigation">
            <li class="Home"><a title="Home" href="index.html" >Home</a></li>
            <li class="x"><a title="About" href="#" >About</a></li>
            <li class="x"><a title="Skills" href="#" >Skills</a></li>
            <li class="x"><a title="Contact" href="#" >Contact</a></li>
        </ul>
    </div> 



</body>
</html>