Bleed margin-right Not Applying? I Faced This Too! 🤯

Lately, I've been working on a component where I needed to create a full-bleed container with content that scrolls all the way to the edge.

This is a pretty common design these days, and it looks great!

But I ran into a really unique issue that took me two hours of thinking just to figure out. CSS can be seriously tricky sometimes!

Anyway, back to the problem — here’s how I set up the container and its items:

<div class="bleed">
  <div class="item">01</div>
  <div class="item">02</div>
  <div class="item">03</div>
  <div class="item">04</div>
  <div class="item">05</div>
</div>

.bleed {
  margin-top: 50px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
}

.item {
  display: grid;
  place-content:center;
  font-size: 30px;
  color: #333;
  flex: 0 0 auto;
  width: 300px;
  height: 150px;
  font-weight: bold;
  border-radius: 10px;
  border: 5px solid #333;
}

.item:first-child {
  margin-left: 16px;
}

.item:last-child {
  margin-right: 16px;
}

This CSS code was working fine in Chrome, Brave, Edge, and Firefox, but Safari had other plans .

On Safari, margin-right wasn’t applying to the last <div> .

I tried so many solutions, but this issue was unbelievably persistent. After two hours of debugging 😩, the pseudo-selector came to my rescue! ✨

.bleed::before,
.bleed::after {
  content: '\00A0';
}

This code might look weird at first, but it’s actually super simple once you understand it!

The '\00A0' is the Unicode for  , which creates a space. Here, I’m applying a ::before and ::after element with that space, and tada! 🎉 It works!

The Flexbox gap property automatically applies a 16px gap on the first and last child, making everything align perfectly.

Here’s the final output: ⬇️

This is final code

.bleed {
  margin-top: 50px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
}

.item {
  display: grid;
  place-content:center;
  font-size: 30px;
  color: #333;
  flex: 0 0 auto;
  width: 300px;
  height: 150px;
  font-weight: bold;
  border-radius: 10px;
  border: 5px solid #333;
}

.bleed::before,
.bleed::after {
  content: '\00A0';
}

What do you think of this trick? Let me know! I'd love to hear your thoughts.

keep hacking! 💻🔥🚀