Margin-top value not being applied

Question

Trying to create a margin to move header elements away from the top of the page. Margin-top is not working for some reason.

The page can be found at this link: https://jevoncochran.github.io/Documents/My%20Site/html/bd_index.html

HTML:

<container class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</container>

CSS:

.universal-header {
  margin-top: 5%;
}

Answer 1

Replace <container> by a <div> and your margin can apply. The reason is as <container> is not a valid HTML markup, the browser do not know how to display it and ignores it.

<div class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</div>

Custom HTML elements in browser are handled as web components, and I guess this it not what you were trying to do.