Unwanted space between page beginning and first div

Question

I want to add a Navigationbar to my HTML-Document. I created a Div with an unordered List and List-Items. The List should be centered and the List-Items should be side by side.

As you can see in the attached screenshot it looks exactly how I want it to be, except of the unwanted blank above the Navigationbar.

It disappears when i remove the CSS-Properties of "navbar-links li", but only if I remove every property of it.

    .navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

<html>
<body>
<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>
</body>
<html>

What it looks like:

How can I remove the blank?

Try .navbar-links{ margin-top : -22px} because ul > li has margin-top 22px — Nitin Dhomse, Mar 14 '18 at 12:10

score 0 · Answer 1 · answered Mar 14 '18 at 12:07

body{margin:0;}
ul{margin:0;}

.navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>

Unwanted space between page beginning and first div

1 Answers1