Site doesn't fit the viewport - html

Question

I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.

Answer 1

Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>

Answer 2

I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}