skip to Main Content

I have this code

HTML:

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

CSS:

.index-fifth-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px;
        gap: 1em;
        color: #704a1b;
      }

      .index-fifth-head h1 {
        color: #614124;
      }

      .index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
      }

Now, these divs are looking something like this (without using display: flex for the .index-fifth-wrappers):

enter image description here

Now, when I use display: flex and modify the code like this:

.index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
        display: flex;
        justify-content: space-around;
      }

This happens:

enter image description here

How can I make it look something like this?:

enter image description here

3

Answers


  1. You’re very close, it’s just a case of moving some styling around in the different levels you’ve set up.

    To ensure there is spacing between your divs inside index-fifth-wrappers, and because you’re using display: flex, you can use gap to space the elements.
    MDN Docs for gap

    The next thing to do is to move the background-color and some padding to the inner divs (index-fifth-wrapper-X). I’ve added a shared class (index-fifth-wrapper) to target these.

    .index-fifth-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50px;
      gap: 1em;
      color: #704a1b;
    }
    
    .index-fifth-head h1 {
      color: #614124;
    }
    
    .index-fifth-wrappers {
      font-size: 17px;
      padding: 20px;
      width: 450px;
      border-radius: 5px;
      color: #704a1b;
      display: flex;
      justify-content: space-around;
      gap: 10px;
    }
    
    .index-fifth-wrapper {
      background-color: #ffdc84;
      padding: 10px;
    }
    <div class="index-fifth">
      <div class="index-fifth-head">
        <h2>Why Us?</h2>
        <h1>Our Advantage</h1>
      </div>
      <div class="index-fifth-wrappers">
        <div class="index-fifth-wrapper index-fifth-wrapper-1">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="index-fifth-wrapper index-fifth-wrapper-2">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="index-fifth-wrapper index-fifth-wrapper-3">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. You need to move the background color to each item and then set the wrapper width to 100%. Adding a gap to the flex items and giving the items flex: 1 will allow you to take out the justify-content: space-between;.

    Take a look at this. I added a class flex-item to each item. Feel free to rename it.

    .index-fifth-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50px;
      gap: 1em;
      color: #704a1b;
    }
    
    .index-fifth-head h1 {
      color: #614124;
    }
    
    .index-fifth-wrappers {
      padding: 20px;
      width: 450px;
      border-radius: 5px;
      color: #704a1b;
      display: flex;
      gap: 2rem;
      width: 100%;
    }
    
    .flex-item {
      background-color: #ffdc84;
      flex: 1;
      padding: 1rem;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    <div class="index-fifth">
      <div class="index-fifth-head">
        <h2>Why Us?</h2>
        <h1>Our Advantage</h1>
      </div>
      <div class="index-fifth-wrappers">
        <div class="flex-item index-fifth-wrapper-1">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="flex-item index-fifth-wrapper-2">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="flex-item index-fifth-wrapper-3">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  3. You need to style the inner divs too.

    (Note: Run in full screen for effect)

    .index-fifth-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50px;
      gap: 1em;
      color: #704a1b;
    }
    
    .index-fifth-head h1 {
      color: #614124;
    }
    
    .index-fifth-wrappers {
      font-size: 17px;
      padding: 20px;
      width: 450px;
      border-radius: 5px;
      color: #704a1b;
      display: flex;
      justify-content: space-around;
      gap: 10px;
      width: 100%;
    }
    
    .index-fifth-wrapper {
      background-color: #ffdc84;
      padding: 2vw;
      width: 30vw;
    }
    <div class="index-fifth">
      <div class="index-fifth-head">
        <h2>Why Us?</h2>
        <h1>Our Advantage</h1>
      </div>
      <div class="index-fifth-wrappers">
        <div class="index-fifth-wrapper index-fifth-wrapper-1">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="index-fifth-wrapper index-fifth-wrapper-2">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
        <div class="index-fifth-wrapper index-fifth-wrapper-3">
          <div style="display: flex; gap: 1em; padding-top: 15px;">
            <i class="fa-solid fa-hospital"></i>
            <p>Credible</p>
          </div>
          <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search