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>
2
Answers
Adjust the auto in the .browser-box margin attribute. It is overriding the latter declarations.
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 toauto
, causing this space-filling effect. Changing the left and right padding to0
allows the column-gap to determine horizontal spacing.