I was wondering how I can not see the orange background when there isn't enough in the to make the item-container overflow. So, if I put 4 divs in there, it wont over flow and you will see orange to the right, but if you add one more item to my example, a horizontal scrollbar will appear and cover the orange background on the right. I want the
item background to cover the whole item-container even if item-container doesn't have a scrollbar

![image](https://i.stack.imgur.com/ZAmlc.png)

[Image with scrollbar](https://i.stack.imgur.com/byNzo.png)

```css
/* Copyright 2014 Owen Versteeg; MIT licensed */

body {
  background: rgba(25, 25, 25, 255)
}

#header-text {
  color: red;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

#header-text2 {
  color: blue;
  text-align: center;
  margin-top: 0;
}

.item-container {
  background: orange;
  width: 418px;
  height: 100px;
  margin: 0 auto;
  overflow-y: auto;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
}
```

```html
<div class="container">
  <h1 id="header-text">Hello</h1>
  <h3 id="header-text2">Hello</h3>

  <div class="item-container">
    <div class="item">Item1</div><div class="item">Item1</div><div class="item">Item2</div><div class="item">Item2</div>
  </div>
</div>
```