As you can see in the code snippets below when the size of the web page reaches 776px it becomes column like aligned but it isn’t directly aligned under each other. I have added the align-items property, How do I directly align the elements under each other? 

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items:center;
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

Angelo is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

display:flex; Flex-direction: column; Should be together in your media query. Because by default, display:flex is a row.

2

You could use the align-text attribute in this case:

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    text-align: center; /* changed this line */
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

The reason is that they are centered but have different width. The quick fix for this is to set the same width when they are in flex column mode.

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items: center;
    flex-direction: column;
  }
  .content {
    width: 250px;
  }
}

You can assign a fix with to your divs inside the flex container.

   .banner-content-container > div {
        width: 320px;
    }

Example:

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

.banner-content-container > div {
    width: 320px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items:center;
    flex-direction: column;
    
  }
  
  
}
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.