Span tags leak outside of its direct parent and all other wrapping parents too. [Take a look at this fiddle](https://jsfiddle.net/g3mgbvnp/).

I've tried `display`, `overflow` and other properties but I can't figure this out. It just keeps leaking out.

**How to fix that?**

```css
.tag {
  padding: 2px 5px 3px 5px;
  margin-right: 5px;
  border: 1px solid red;
  white-space: nowrap; /* prevent splitting spans */
}

.tag-wrapper {
  border: 1px solid blue;
  max-width: 300px;
}

.parent {
  border: 1px solid green;
}
```

```html
<div class="parent">
  <div class="tag-wrapper">
    <span class="tag">tag 1</span>
    <span class="tag">tag 2</span>
    <span class="tag">tag 3</span>
    <span class="tag">tag 4</span>
    <span class="tag">tag 5</span>
    <span class="tag">tag 6</span>
    <span class="tag">tag 7</span>
  </div>
</div>
```

I tried to find an answer but it seems that I don't know how to phrase this question. Im familiar with **collapsing margins** and it seems to be a different problem.