How to remove gap between navigation and the header? Also between navigation and main content?

Question

How can I remove the gap between the navigation and the header? ALso between the nav and the main content? Navigation buttons i.e. ul are in their perfect place. but black navigation bar is causing me lots of unnecessary troubles! I am unable to fix it!

here is my html

        <div id="header">
        <div id="header-container">
            Logo goes here!!
        </div>
    </div>

    <div class="nav">
        <div class="nav-container">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Browse</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>


    <div class="main-body">
        <h1>Contant here!</h1>
    </div>

here is my css code:

{
    margin: 0;
    padding: 0;
}

.clear{
    clear: both;
}


body{

    margin: 0 auto;
    background: #cccccc;
}

#header{
    background: #FF9900;
    height: 160px;
    width: 100%;
}

#header-container{
    width: 960px;
    height: 160px;
    margin: 0px auto 0px auto;
}

.nav{
    width: 100%;
    height: 70px;
    background: #000000;
    margin-top: 0px; 
    margin-bottom: 0px;
}

.nav .nav-container{
    width: 960px;
    height: 62px;
    margin: auto;
    margin-top: 5px;
}

.nav .nav-container ul{
    margin-top: 0px;
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

.nav .nav-container ul li{
    display: inline-block;
    padding: 0px;
    border-radius: 10px;
    margin-right: 20px;
    margin-left: 7px;
    background: #000000;
}

.nav .nav-container ul li a{
    color: #FF9900;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
    width:150px;
    text-align: center;
    height: 58px;
    line-height: 250%;

}

.nav .nav-container ul li a:hover{
    background:#FF9900;
    color: white;
    border-radius: 10px; 
}

.main-body{
    width: 960px;
    background: white;
    margin:auto;
    margin-top: 0px;
}

Mooseman · Accepted Answer · 2015-01-05T16:25:25.650

0

Change margin-top: 5px; to margin-top: 0; in .nav .nav-container.

.nav .nav-container{
    width: 960px;
    height: 62px;
    margin: auto;
    /* margin-top: 5px; becomes */ margin-top: 0;
}

Demo: http://jsfiddle.net/ue65t3gh/

edited Jan 05 '15 at 16:25

answered Jan 05 '15 at 16:19

Mooseman

18,763
14
70
93

Didn't work!! Also I added margin:auto to center the content! – Jan 05 '15 at 16:23
@killerprince182 I added a demo. What "didn't work"? – Mooseman Jan 05 '15 at 16:25
there kis no space between menu items and the header. – Jan 05 '15 at 16:57
Also there is space between content and the nav – Jan 05 '15 at 16:58
@killerprince182 Great! Please accept an answer when you are able. – Mooseman Jan 05 '15 at 17:10

How to remove gap between navigation and the header? Also between navigation and main content?

1 Answers1