How to get rid of the white right margin? - html

Question

How can I make the containers fit in the page with no left white spaces?
I've tried html, body { margin: 0; padding: 0} besides adding all the content in a principal container than .container {max-width: 100%} but the margin is still there.
html,
body {
margin: 0;
padding: 0;
}
/* blue container, first container */
.header,
.about {
background-color: #1f2937;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 100px;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
padding-left: 150px;
flex: 1 0 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 0;
gap: 16px;
padding-right: 150px;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: space-between;
padding-bottom: 100px;
}
.about-text {
padding-left: 150px;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 350px;
margin-bottom: 5px;
}
.button-one {
background-color: #3882f6;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #1c5dc5;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.secondary-text {
width: 350px;
margin-bottom: 10px;
font-size: 18px;
color: #e5e7eb;
}
.header-image {
width: 400px;
height: 285px;
display: flex;
flex-shrink: 0;
padding-right: 150px;
padding-bottom: 25px;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
padding-top: 50px;
display: flex;
justify-content: center;
}
.image img {
width: 150px;
height: 155px;
border: 2px solid #3882f6;
border-radius: 15px;
}
.image img:hover {
width: 150px;
height: 155px;
border: 2px solid rgb(56, 130, 246);
border-radius: 15px;
box-shadow: 2px 2px 2px 1px rgba(56, 129, 246, 0.175);
}
.subtext {
color: #1f2937;
width: 150px;
text-align: center;
padding-top: 5px;
padding-bottom: 100px;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
padding-top: 50px;
gap: 40px;
}
/* third container, quote container */
.quote {
background-color: #e5e7eb;
height: 500px;
}
.quote-text {
font-size: 36px;
color: #1f2937;
font-style: italic;
font-weight: lighter;
width: 755px;
padding: 150px 320px;
padding-bottom: 5px;
}
.author {
font-size: 24px;
color: #1f2937;
font-weight: bolder;
padding-top: 5px;
padding-left: 895px;
width: 250px;
display: flex;
flex-shrink: 0;
}
/* fourth container, box action */
.action {
background-color: #F9FAF8;
height: 440px;
display: flex;
justify-content: center;
align-items: center;
}
.box-action {
background-color: #3882f6;
height: 130px;
width: 760px;
border-radius: 10px;
box-shadow: 0 5px 8px 0px rgba(8, 8, 8, 0.145);
display: flex;
justify-content: space-around;
align-items: center;
flex-shrink: 0;
}
.action-title {
font-size: large;
color: #F9FAF8;
font-weight: bolder;
}
.action-subtext {
color: #e5e7eb;
font-weight: lighter;
}
.button-two {
background-color: #3882f6;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
border: 2px solid #F9FAF8;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-two:hover {
color: #3882f6;
font-weight: bold;
background-color: #F9FAF8;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text-two {
color: #F9FAF8;
}
.button-text-two:hover {
color: #3882f6;
}
/* Footer */
.footer {
background-color: #1f2937;
color: #e5e7eb;
font-weight: lighter;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="header">
<div class="logo">your surfboard decals</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#">about</a></li>
<li><a class="link-text" href="#">contact</a></li>
</div>
</div>
<div class="about">
<div class="about-text">
<div class="main-text">Design your own decals</div>
<div class="secondary-text">Your art can be integrated into the build of your composite products, like surfboards, boats, SUPs, wake surf, paddle blades, skateboards, and even rockets headed for outer space! Literally, the sky is the limit for your creative and decorative potential.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/surfboards.jpg">
</div>
<div class="information">
<div class="information-header-text">Some of our customers arts</div>
<div class="image-subtext">
<div class="one">
<a href="https://storage.covet.pics/posts/5647583/standard_resolution/ff93db0981b0895fe2c4ac4120125f709d6908eb.jpg">
<div class="image"><img src="./images/design-one.jpg" alt="A man holding his board on his head"></div>
</a>
<div class="subtext">A man holding his board on his head</div>
</div>
<div class="two">
<a href="https://storage.covet.pics/posts/15039645/standard_resolution/e13ff9cc00e8119f16a324727ceb9b86">
<div class="image"><img src="./images/design-two.jpeg" alt="A white furry fluffy dog"></div>
</a>
<div class="subtext">A white furry fluffy dog</div>
</div>
<div class="three">
<a href="https://storage.covet.pics/postassets/7301301/standard_resolution/6913516f4a17a437faa32e83cd569e46">
<div class="image"><img src="./images/design-three.jpeg" alt="A logo with multiple colors"></div>
</a>
<div class="subtext">A logo with multiple colors</div>
</div>
<div class="four">
<a href="https://storage.covet.pics/posts/15087630/standard_resolution/9f218611200c504424b84a41b70c331b">
<div class="image"><img src="./images/design-four.jpeg" alt="Multiple surfboard stickers"> </div>
</a>
<div class="subtext">Multiple surfboard stickers</div>
</div>
</div>
<div class="quote">
<div class="quote-text">
You never really know what's coming. A small wave, or maybe a big one. All you can really do is hope that when it comes, you can surf over it, instead of drown in its monstrosity.
</div>
<div class="author">
- Alysha Speer
</div>
</div>
</div>
<div class="action">
<div class="box-action">
<div class="action-text">
<div class="action-title">Design your own art!</div>
<div class="action-subtext">Sign up for creating your art by clicking that button right over there!
</div>
</div>
<div class="button-two">
<a class="button-text-two" href="#">Sign up</a>
</div>
</div>
</div>
<div class="footer">
Copyright © The Odin Project 2023
</div>
enter image description