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

.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).

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

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>