Margin auto doesn't work even if I have width and height defined

I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I’m doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here’s where I’m not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn’t seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that’s a right way.

header {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 90em;
  width: 100%;
  padding: 2em;
  min-height: 8vh;
  top: 0;
  left: 0;
  margin: 0 auto;
}

header img {
  width: 10em;
  height: 2em;
}

header ul {
  list-style: none;
}

header ul a {
  text-decoration: none;
}

header ul a li {
  display: inline-block;
  padding: 2em;
  color: white;
}

header ul a li:hover {
  color: #000;
}

header .burger {
  display: none;
}

@media only screen and (max-width: 996px) {
  header {
    padding: 2.5em;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  header ul {
    display: none;
  }
  header .burger {
    display: block;
  }
  header .burger img {
    width: 3em;
  }
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: Alata;
}

.container {
  min-height: 100vh;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-image: url("../images/desktop/image-hero.jpg");
  -webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}

.container__intro {
  max-width: 90em;
  padding: 2em;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container__intro__desc {
  padding: 2em 5em 2em 2em;
  border: 1px solid white;
}

.container__intro__desc p {
  color: white;
  font-size: 4rem;
  font-family: Josefin Sans;
}

img {
  width: 100%;
  height: auto;
}
/*# sourceMappingURL=main.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing page</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet"> 
</head>
<body>
    <header>
        
        <a href="">
             <img src="images/logo.svg" alt="logo">
        </a>
        <nav>
            <ul>
                <a href="">
                    <li>About</li>
                </a>
                <a href="">
                     <li>Careers</li>
                </a>
                
                <a href="">
                     <li>Events</li>
                </a>
                
                <a href="">
                     <li>Products</li>
                </a>
                <a href="">
                    <li>Support</li>

                </a>
            </ul>
            <div class="burger">
                <img src="images/icon-hamburger.svg" alt="">
            </div>
        </nav>
    </header>
    <div class="container">
        <div class="container__intro">
           <div class="container__intro__desc">
            <p>
                Immersive
            </p>

            <p>
                Experiences
            </p>

            <p>
                That Deliver
            </p>
        </div>  
        </div>
       
    </div>

    <div class="container">

        <div class="img-container">
           
        </div>
        <div class="__desc">

        </div>
    </div>

    <div class="container">
        <div class="__top">
            <p>Our Creations</p>
            <a href="#">See All</a>
        </div>

        <div class="__grid">
            <div class="item">
                <img src="" alt="">
                <p>Deep</p>
                <p>Earth</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>Night</p>
                <p>Arcade</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>Soccer</p>
                <p>Team VR</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>The</p>
                <p>Grid</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>From Up</p>
                <p>Above VR</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>Pocket </p>
                <p>Borealis</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>The</p>
                <p>Curiosity</p>
            </div>
            <div class="item">
                <img src="" alt="">
                <p>Make It</p>
                <p>Fisheye</p>
            </div>
        </div>
    </div>


</body>
</html>

Margin auto doesn't work even if I have width and height defined

27 thoughts on “Margin auto doesn't work even if I have width and height defined”

Leave a Comment Cancel reply