Horizontal scroll-bar going beyond container width - html

Question

I'm working on a landing page.
In the third section, I will have content with a horizontal scroll bar. I already have the desired scrolling behavior, but I'd like the scroll bar to respect the container of the page.
Here's my current code:
.page {
overflow: hidden;
}
.container {
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<div class="container">
<h3>Section 1</h3>
</div>
<div class="container">
<h3>Section 2</h3>
</div>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<div class="container">
<h3>Section 4</h3>
</div>
</div>
Here are two examples of what I'd like this to be like:
https://prnt.sc/n0o0k7
https://prnt.sc/n0o21r

Answer 1

I'm not really sure I understand the question. The third section wouldn't be styled correctly in the container because you didn't wrap it in the container. I moved the container class's styles to the page class's style and removed all the containers to achieve your desired effect.
.page {
overflow: hidden;
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<h3>Section 1</h3>
<h3>Section 2</h3>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<h3>Section 4</h3>
</div>