Flexbox creating too wide of a gap between elements

November 26, 2023

I’m looking for a fixed 40 pixel gap in between columns but the wider you make the screen the larger a gap flexbox creates. How do I set this fixed gap and stop this behavior?

(its complaining about it being a short description but there are no other details to add so I will just add this text here to hopefully stop this message from coming up)

.browser-box {
  max-width: 270px;
  margin: 0 auto 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }

<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>

>Solution :

The padding is caused by the margin: 0 auto 40px; line in the css for .browser-box. This is setting the left and right margins to auto, causing this space-filling effect. Changing the left and right padding to 0 allows the column-gap to determine horizontal spacing.

.browser-box {
  max-width: 270px;
  margin: 0 0 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  /* box-shadow: rgba(149, 157, 165, 0.2) 0 8px 12px; */
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

  .browsers-container {
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-inline: auto;
  }
  .browser-box:nth-of-type(2) {
    transform: translateY(40px);
  }
  
  .browser-box:nth-of-type(3) {
    transform: translateY(80px);
  }

<div class="browsers-container">
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
  <div class="browser-box">
    <h3>Add to Chrome</h3>
    <p>Minimum version 62</p>
    <button class="btn-browser">Add & Install Extension</button>
  </div>
</div>