Magic Gap Below Unordered List In Weblayout

Currently i am creating a small website with Twitter Bootstrap. I already created a navbar and some contentent below that navbar, so until now my background was white, as was the

Solution 1:

When you use display: inline-block; is that whitespace in HTML becomes visual space on screen and there are a few solutions to remove that whitespace in your case. - by David Walsh

Solution 1: remove display: inline-block; to your ul tag. - DEMO 1

ul {
    /* display: inline-block; */
}

Solution 2: apply display: block; to your ul tag. - DEMO 2

ul {
   display: block;
}

Solution 3: apply vertical-align: middle; or top or bottom to your ul tag. - DEMO 3

ul {
   display: inline-block;
   vertical-align: middle;
}

For more solutions:

Fighting the Space Between Inline Block Elements - by Chris Coyier