Why are my divs disappearing when I use display: flex?

Question

I'm trying to make the section divs next to each other (horizontal). However, they disappear when I use flex as a display. I'm using the container div as a container and a sections div that has the 2 sections. Then each of these sections has blocks. I have been trying to make these sections appear side by side but they keep being ontop of each other and when I try to change the display to flex or try to float them they just go invisible. Any Idea?

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #59537E;
}

#navbar {
  background: #382F6A;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, .3);
  height: 70px;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
  margin-left: 20px;
  color: #D2CBF5;
  font-weight: bold;
  margin-top: 7px;
  cursor: pointer;
}

nav ul li:hover {
  color: white;
}

#links {
  display: flex;
}

#links img {
  margin-right: 13px;
}

.container {
  height: 1000px;
  margin: auto;
  max-width: 1150px;
}

.row {
  margin: 40px 20px 25px 20px;
  display: flex;
  justify-content: center;
}

.row a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.btn {
  margin: 0px 20px;
  border: 2px white solid;
  padding: 7px 25px;
  border-radius: 20px;
  font-weight: bold;
}

.btn:hover {
  background: white;
  color: #59537E;
  border-color: blanchedalmond;
}

.sections {
  display: flex;
}

.section {
  margin-top: 100px;
  max-width: 500px;
}

.block {
  background: white;
  border-radius: 10px;
  height: 300px;
  margin-top: 25px;
  display: block;
}

<nav id="navbar">
  <div id="links">
    <img src="IMGS/logo-badge.svg" width="32px" height="32px">
    <ul>
      <li>Home</li>
      <li>Courses</li>
      <li>Groups</li>
      <li>Calender</li>
      <li>Support</li>
      <li>BAU</li>
      <li>BAUGO</li>
      <li>BAU Library</li>
    </ul>
  </div>
  <div id="profile">
    <ul>
      <li>Noti</li>
      <li>Msgs</li>
      <li>Khaled</li>
    </ul>
  </div>
</nav>
<div class="container">
  <div class="row">
    <a href="" class="btn">Courses</a>
    <a href="" class="btn">Updates</a>
  </div>
  <div class="sections">
    <div class="section">
      <div class="block">

      </div>

      <div class="block">

      </div>
    </div>

    <div class="section">
      <div class="block">

      </div>

      <div class="block">

      </div>
    </div>
  </div>
</div>

Answer 1

I hope this is what you are expecting.

Add these changes in your CSS to achieve the expected result:

.sections {
  display: flex;
  margin: 0px 5px;
  justify-content: space-around;
}

.section {
  margin-top: 100px;
  flex-grow:1;
  max-width: 500px;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #59537e;
}

#navbar {
  background: #382f6a;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.3);
  height: 70px;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
  margin-left: 20px;
  color: #d2cbf5;
  font-weight: bold;
  margin-top: 7px;
  cursor: pointer;
}

nav ul li:hover {
  color: white;
}

#links {
  display: flex;
}

#links img {
  margin-right: 13px;
}

.container {
  height: 1000px;
  margin: auto;
  max-width: 1150px;
}

.row {
  margin: 40px 20px 25px 20px;
  display: flex;
  justify-content: center;
}

.row a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.btn {
  margin: 0px 20px;
  border: 2px white solid;
  padding: 7px 25px;
  border-radius: 20px;
  font-weight: bold;
}

.btn:hover {
  background: white;
  color: #59537e;
  border-color: blanchedalmond;
}

.sections {
  display: flex;
  margin: 0px 5px;
  justify-content: space-around;
}

.section {
  margin-top: 100px;
  flex-grow:1;
  max-width: 500px;
}

.block {
  background: white;
  border-radius: 10px;
  height: 300px;
  margin-top: 25px;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>itslearning</title>
</head>

<body>
  <nav id="navbar">
    <div id="links">
      <img src="IMGS/logo-badge.svg" width="32px" height="32px">
      <ul>
        <li>Home</li>
        <li>Courses</li>
        <li>Groups</li>
        <li>Calender</li>
        <li>Support</li>
        <li>BAU</li>
        <li>BAUGO</li>
        <li>BAU Library</li>
      </ul>
    </div>
    <div id="profile">
      <ul>
        <li>Noti</li>
        <li>Msgs</li>
        <li>Khaled</li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <a href="" class="btn">Courses</a>
      <a href="" class="btn">Updates</a>
    </div>
    <div class="sections">
      <div class="section">
        <div class="block">

        </div>
        <div class="block">

        </div>
      </div>
      <div class="section">
        <div class="block">

        </div>
        <div class="block">

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

</html>

Answer 2

You need to give width to .section. Like

  .section {
    margin-top: 100px;
    width: 100%;
    max-width: 500px;
  }

Codepen: https://codepen.io/manaskhandelwal1/pen/mdrGVLd

Answer 3

.sections {
  display: flex;
}
.section {
  margin-top: 100px;
  max-width: 500px; 
  flex: 1; /* You need this property */
}

display: flex means a container positions its children according to the flexbox model, but you still have to tell the children to take up the available space by setting their flex to 1 (or any other number, in which case the space will be distributed across the children proportionally to their value).