How to fix responsive layout width problem - css

Question

screenshotI'm quite new to coding. I have this responsive width problem which is probably a simple solution but I can't yet find. Every time I reduce the screen past around 580px the layout reduces at twice the rate of the viewport, leaving me with half of my project on the left and whitespace on the right.
Can someone please help me?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.clear {
clear: both;
}
body {
line-height: 1.5;
background-color: whitesmoke;
}
.width-container {
width: 80%;
margin: auto;
}
/* Responsive */
#media(max-width: 1100px) {
.flex-form-container {
flex-direction: column;
align-items: center;
}
.flex-list-and-images-container {
flex-direction: column;
align-items: center;
}
.why-me-list {
width: 60%;
}
.flex-reviews {
flex-direction: column;
padding: 4em;
}
.quote1 {
top: 20%;
}
.quote2 {
top: 40%;
}
.quote3 {
top: 62.5%
}
}
#media screen and (max-width: 768px) {
.flex-header-container {
flex-direction: column;
align-items: center;
}
.flexbox-1 {
order: 1;
}
.flexbox-2 {
order: 3;
}
.flexbox-3 {
order: 2;
}
/*
.contact-message {
float: none;
}
.contact-numbers {
float: none;
}
*/
.width-container {
width: 100%;
}
.nav-tab {
display: block;
}
}
/*
#media screen and (max-width: 580px) {
body {
position: absolute;
}
}
*/
/* Header */
header {
background-image: url(Images/jaye-haych-7tkDoo2L_Eg-unsplash.jpg);
background-position: center;
background-size: cover;
}
.flex-header-container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
}
.flex-header-container div {
padding: 0.5em;
margin: 0.5em;
}
.flexbox-1 {
flex-basis: 33%;
}
.flexbox-2 {
background-color: rgb(255, 255, 255);
flex-basis: 22.5%;
border-radius: 10px;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.flexbox-2 .ncfe {
margin: 1.4em;
padding: em;
}
.flexbox-2 .CG {
margin:
}
.flexbox-3 {
flex-basis: 33%;
color: white;
text-shadow: 1px 1px 1px black;
font-family: 'Satisfy', cursive;
}
.flexbox-3 h4 {
font-size: 2.5em;
padding: 0.3em;
text-align: center;
font-style: italic;
font-family: 'Satisfy', cursive;
}
.flexbox-3 span {
display: block;
text-align: center;
font-size: 1.35em;
}
.logo {
width: 165px;
height: 220px;
}
.CG {
width: 130px;
}
.ncfe {
width: 100px;
}
/* Nav section */
nav {
text-align: center;
background-color: #1A98BE;
color: white;
padding: 0.7em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.nav-tab {
display: inline-block;
margin: 0.5em;
padding: 0.4em;
font-size: 1.5em;
text-shadow: 1px 1px 1px black;
background-color: #F3CA4F;
border-radius: 10px;
box-shadow: 0.5px 0.5px 0.5px 0.5px black;
text-transform: uppercase;
}
nav ul li a {
text-decoration: none;
color: white;
font-style: italic;
transition: 1.5s;
}
nav ul li a:hover {
color: #E85522;
font-size: 2em;
}
/* About Section */
.about {
}
h1 {
padding: 1em;
font-size: 4.4em;
background-color: #E85522;
color: white;
text-shadow: 5px 1px 1px black;
text-align: center;
font-style: italic;
font-family: 'Satisfy', cursive;
border-radius: 0 0 5px 5px;
box-shadow: 1px 1px 1px 1px black;
transition: 1.5s;
}
.why-choose-me {
padding: 1em;
font-size: 2.3em;
background-color: #E85522;
color: white;
text-shadow: 3px 1px 1px black;
font-family: 'Satisfy', cursive;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px black;
font-style: italic;
}
.about p {
padding: 1.5em;
font-size: 1.2em;
}
/* Why Me Section */
.flex-list-and-images-container {
display: flex;
justify-content: space-around;
}
.why-me-images {
display: flex;
flex-basis: 30%;
justify-content: center;
align-self: center;
/* border: 1px solid black;*/
}
.why-me-images .ncfe {
margin-left: 1em;
margin-top: 1em;
width: 100%;
height: 7em;
}
.why-me-list {
flex-basis: 40%;
margin: 2em;
padding: 1em;
border: 1px solid black;
background-color: #B0B0B3;
color: white;
border-radius: 5px;
box-shadow: 1px 1px 1px black;
}
.why-me-item {
padding: 1em;
list-style-type: none;
text-shadow: 1px 1px 1px black;
font-size: 1.2em;
}
.why-me-item:before {
content: '✓';
padding: 0.3em;
}
/* Reviews */
.flex-reviews {
border: 1px solid black;
display: flex;
justify-content: space-around;
background-image: url(Images/amol-tyagi-TUbhfdomGsY-unsplash.jpg);
background-position: center;
background-size: cover;
align-items: center;
}
.customer-review {
font-size: 1.4em;
flex-basis: 30%;
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
padding: 2.5em;
}
.reviews h2 {
padding: 1em;
background-color: #E85522;
color: white;
font-family: 'Satisfy', cursive;
font-style: italic;
font-size: 2.2em;
text-align: center;
text-shadow: 1px 1px 1px black;
}
.reviews {
position: relative;
}
.reviews-button {
padding: 0.4em;
cursor: pointer;
background-color: #B0B0B3;
color: white;
display: block;
text-align: center;
font-size: 1.4em;
font-style: italic;
transition: 1s;
text-shadow: 1px 1px 1px black;
}
.reviews-button:hover {
color: #E85522;
font-size: 1.5em;
text-shadow: 0.5px 0.5px 0.5px black;
}
.quote1 {
position: absolute;
bottom: 60%;
left: 14%;
text-shadow: 2px 2px 2px black;
}
.quote2 {
position: absolute;
bottom: 60%;
left: 48%;
text-shadow: 2px 2px 2px black;
}
.quote3 {
position: absolute;
bottom: 60%;
left: 80%;
text-shadow: 2px 2px 2px black;
}
/* Contact */
.contact {
padding: 4em;
border: 1px solid black;
background-color: #E85522;
color: white;
}
.contact-message {
float: left;
width: 60%;
padding: 1em;
text-align: center;
}
.contact-message p {
font-size: 3.8vw;
}
.contact-heading {
font-size: 3em;
text-shadow: 1px 1px 1px black;
padding: 0.3em;
font-family: 'Satisfy', cursive;
font-style: italic;
}
.contact-numbers {
float: left;
padding: 1em;
width: 31%;
text-align: center;
}
.contact-numbers p {
font-size: 2.8em;
}
/* Form */
form {
padding: 5em;
text-align: center;
}
.flex-form-container {
display: flex;
justify-content: space-around;
background-image: url(Images/maria-ziegler-jJnZg7vBfMs-unsplash.jpg);
background-size: cover;
background-position: center;
}
.form-left {
flex-basis: 50%;
}
.form-right {
flex-basis: 30%;
padding: 5em;
}
.form-right h3 {
color: white;
font-size: 3em;
text-shadow: 1px 1px 1px black;
text-align: center;
padding: 0.4em;
font-family: 'Satisfy', cursive;
font-style: italic;
}
.form-right p {
text-align: center;
font-size: 1.4em;
text-decoration: underline;
text-shadow: 0.5px 0.1px black;
font-style: italic;
}
.form-right p a {
color: #1A98BE;
}
.form-right p a:hover {
color: white;
text-shadow: 2px 1px 1px black;
}
input {
display: inline-block;
padding: 0.6em;
margin: 0.2em;
font-size: 1em;
border-radius: 5px;
}
input[type="submit"] {
color: #1A98BE;
transition: 0.5s;
cursor: pointer;
}
input[type="submit"]:hover {
color: #E85522;
font-size: 1.5em;
box-shadow: 1px 1px 1px 1px black;
}
textarea {
display: inline-block;
padding: 0.4em;
margin: 1em;
width: 373px;
font-size: 1.6em;
border-radius: 5px;
}
/* Footer */
footer {
border: 1px solid black;
text-align: center;
padding: 1em;
background-color: #B0B0B3;
color: white;
}
footer > * {
padding: 0.4em;
}
footer p a {
color: #E85522;
}
.fa {
padding: 1em;
transition: 1s;
color: #E85522;
}
.fa:hover {
color: white;
font-size: 25px;
}
https://codepen.io/jared-parsons/pen/LYGexBY?editors=1100

Answer 1

I think I found a solution:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Got rid of the ugly whitespace and scroll bar.

Answer 2

As I understood from your question, that you having an issue with the dimension of the page. If this is the issue, have tried to use % or ration to indicate the dimension of the page or the layout?