How to avoid "box item" from wrapping content?

Question

Why my box item is wrap i want align with both side and right side spacing of 2px also i attache screenshot what i want. Thanks

body { padding: 0 30px; }
.banner { background-color: #3b524c; height: 550px; }
.box ul { margin: 20px -2px 0 0; padding: 0; width: auto; }
.box ul li { width: 25%; margin-right: 2px; float: left; list-style: none; display: block; padding: 29px 0; font-size: 16px; line-height: 23px; text-transform: uppercase; background-color: #e57b76; color: #d8d8d8; text-align: center; }

<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

in case you want to do the same with flexbox and CSS-grid : https://stackoverflow.com/questions/53020698/how-to-add-1px-margin-to-a-flex-item-that-is-flex-0-0-25/53020778#53020778 — Temani Afif, Nov 14 '18 at 13:57

score 3 · Accepted Answer · answered Nov 14 '18 at 13:23

Because math. You can't have 4 times width:25% AND extra margins. It adds up to more than 100%.

Change the width to adjust for the extra margin using calc.

body {
  padding: 0 30px;
}

.banner {
  background-color: #3b524c;
  height: 50px;
}

.box ul {
  margin: 20px -2px 0 0;
  padding: 0;
  width: auto;
}

.box ul li {
  width: calc(25% - 2px);
  margin-right: 2px;
  float: left;
  list-style: none;
  display: block;
  padding: 29px 0;
  fnt-size: 16px;
  line-height: 23px;
  text-transform: uppercase;
  background-color: #e57b76;
  color: #d8d8d8;
  text-align: center;
}

<section class="banner"></section>
<section class="box">
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</section>

Ah no, I just read mdn again, no margin included using that too. — Niloct, Nov 14 '18 at 13:29

score -1 · Answer 2 · answered Nov 14 '18 at 13:25

To achieve the above image you just need to add a

    display: flex;

to the "ul" element in your CSS. However depending on the intended behaviour you might not want to be using a "UL". If it's only ever going to be the four items you might want to consider using "div" instead. I've also done a codepen to show it with the flex

How to avoid "box item" from wrapping content?

2 Answers2