Undefined margin in the header of webpage

Question

I was supposed to make the header section of a webpage which should look like this. Desired webpage look. (The HTML and CSS code has been enclosed)

So how I approached towards creating the HTML file is to first of all create a "header" tag(as a container for header) in which I created a navbar. For displaying various items, I used an unordered list whose CSS was adjusted suitably to display the items in horizontal order.

Now the problem is that there occurs a margin in the page from the top which is undesirable.(I purposely changed the background color for better visibility against a white/black background). When I inspected it using the Chrome Dev tools, I found that it occurred due to the margin of the <ul tag which could simply be resolved by setting the margin to zero.

But why did the margin simply occur in the first place outside its parent <nav tag? Shouldn't the complete width of the <ul (width of content + width of margin) be included inside its container? Why does the margin width appear outside its parent?

body {
    margin: 0px;
}

/* Body Header */

#body-header {
    height: 65vh;
    opacity: 0.8;
    background-image: url(https://ninjasfiles.s3.amazonaws.com/asset_0000000000000020_1549743985_macbook_mouse.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Horizontal Lists */

.horizontal-list {
    list-style: none;
    padding-left: 0px;
}

.horizontal-list li {
    display: inline-block;
    margin: 0px 8px 8px 0px;
}


.horizontal-list li a {
    color: white;
    text-decoration: none;
    transition: color 0.5s, border-bottom 4s;
}

.horizontal-list li a:hover {
    color: lightgrey;
    border-bottom: 1px solid white;
}

.text-center {
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title> My Resume </title>
    <link rel="stylesheet" href="experiment.css">
</head>
<body>

<header id="body-header">
    <nav>

        <ul class="horizontal-list text-center">
            <li>
                <a href="#" > Home </a>
            </li>
            <li>
                <a href="#about" > About </a>
            </li>
            <li>
                <a href="#skills" > Skills </a>
            </li>
            <li>
                <a href="#experience" > Experience </a>
            </li>
            <li>
                <a href="#education" > Education </a>
            </li>
            <li>
                <a href="#portfolio" > Portfolio </a>
            </li>
            <li>
                <a href="#contact" > Contact </a>
            </li>
        </ul>

    </nav>
<header>
</body>
</html>

tacoshy · Answer 1 · 2022-03-24T12:42:58.470

default margin of the ul which can be removed with: .horizontal-list { margin-top: 0; }

The <ul> only has a default amrgin at top and bottom

.horizontal-list {
    margin-top: 0;
}



/* --- --- Original CSS --- --- */
body {
    margin: 0px;
}

/* Body Header */

#body-header {
    height: 65vh;
    opacity: 0.8;
    background-image: url(https://ninjasfiles.s3.amazonaws.com/asset_0000000000000020_1549743985_macbook_mouse.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Horizontal Lists */

.horizontal-list {
    list-style: none;
    padding-left: 0px;
}

.horizontal-list li {
    display: inline-block;
    margin: 0px 8px 8px 0px;
}


.horizontal-list li a {
    color: white;
    text-decoration: none;
    transition: color 0.5s, border-bottom 4s;
}

.horizontal-list li a:hover {
    color: lightgrey;
    border-bottom: 1px solid white;
}

.text-center {
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title> My Resume </title>
    <link rel="stylesheet" href="experiment.css">
</head>
<body>

<header id="body-header">
    <nav>

        <ul class="horizontal-list text-center">
            <li>
                <a href="#" > Home </a>
            </li>
            <li>
                <a href="#about" > About </a>
            </li>
            <li>
                <a href="#skills" > Skills </a>
            </li>
            <li>
                <a href="#experience" > Experience </a>
            </li>
            <li>
                <a href="#education" > Education </a>
            </li>
            <li>
                <a href="#portfolio" > Portfolio </a>
            </li>
            <li>
                <a href="#contact" > Contact </a>
            </li>
        </ul>

    </nav>
<header>
</body>
</html>

Undefined margin in the header of webpage

1 Answers1