<div class="wrapper">
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
  
<div class="container negative">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
  
<div class="container gaps">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
</div>
.wrapper {
    max-width: 600px;
    margin: 2em auto;
    border: 5px solid rgb(63,94,251);
}

.container {
  display: flex;
  margin: 1em 0;
}

.negative {
  margin: 1em -10px 1em -10px;
}

.gaps {
  gap: 20px;
}

.container.gaps > * {
  margin: 0;
}

.container > * {
  margin: 0 10px;
  flex: 1;
  background: rgb(63,94,251);
  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,0.5688777464110644) 100%);
  color: #fff;
  font: 200% Arial, Helvetica, sans-serif;
  padding: 20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.