Simple container flexbox "align-content: center;" not working-CodePudding

Sample From https://www.internetingishard.com/html-and-css/flexbox/

Im just now learning CSS and HTML together and I was doing fine until I ran into this problem. Cant seem to figure out the right bit of code to change to make sure that I'm able to get it to do what I want it to do.

Basically,

I can't get my "Awesome Logo" Header (header-container / header) to be centered on my page!

Here is the result I'm getting: Awesome Logo Not Centering

Here is the result I want: Awesome Logo Centering

<html lang='en'>
  <head>

    <meta charset='UTF-8'/>
    <title>Some Web Page</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <div class='menu-container'>
      <div class='menu'>
        <div class='date'>Aug 14, 2016</div>
        <div class='links'>
          <div class='signup'>Sign Up</div>
          <div class='login'>Login</div>
      </div>
    </div>
  </div>

  <div class='header'>
    <div class='subscribe'>Subscribe &#9662;</div>
    <div class='logo'><img src='images/awesome-logo.svg'/></div>
    <div class='social'><img src='images/social-icons.svg'/></div>
  </div>

  <div class='header-container'>

    <div class='photo-grid-container'>
      <div class='photo-grid'>

        <div class='photo-grid-item first-item'>
          <img src='images/one.svg'/>
        </div>
        <div class='photo-grid-item'>
          <img src='images/two.svg'/>
        </div>
        <div class='photo-grid-item'>
          <img src='images/three.svg'/>
        </div>
        <div class='photo-grid-item'>
          <img src='images/four.svg'/>
        </div>
        <div class='photo-grid-item'>
          <img src='images/five.svg'/>
        </div>

      </div>
    </div>


  </div>
  </body>
</html>

CSS

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

}

.menu-container {
  color: #fff;
  background-color: #5995DA;  /* Blue */
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

.menu {
  width: 900px;
  display: flex;
  justify-content: space-between;
}

.links {
  display: flex;
  justify-content: flex-end;
}

.login {
  margin-left: 20px;
}

.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-container {
  color: #5995DA;
  background-color: #D6E9FE;
  display: flex;
  justify-content: center;
}


.photo-grid-container {
  display: flex;
  justify-content: center;
}

.photo-grid {
  width: 900px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.photo-grid-item {
  border: 1px solid #fff;
  width: 300px;
  height: 300px;
}

Please help!

CodePudding user response：

While your header have a fix width, you should add margins auto to header class

.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left:auto;
  margin-right:auto;
}

CodePudding user response：

You should remove the fixed header width to allow it to fill the whole available horizontal space. Also justify-content: center; and adding a gap gives a result that is closer to what you expect.

.header {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}