Webpage starts zoomed out on mobile devices-CodePudding

I have created a website for desktop and mobile, and it has to be responsive. My problem is that when I resize the browser all the content gets zoomed out instead of adapting. I also have an issue with the HTML. why is it only taking up 1/3 of the page according to dev tools and when I add width:1100px to my sections it renders the desktop version, but when I take it away it floats to the left side? Why is this happening?

Images of the problem:

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Source Sans Pro', sans-serif;
     background-color: black;
     color: white;
     line-height: 30px;
     width:100%;
     overflow-x: hidden;
}
 img {
     width: 100%;
}
 h1 {
     font-weight: 700;
     font-size: 44px;
     margin-bottom: 40px;
     line-height: 50px;
}
 h3 {
     width: 100%;
}
 header {
     display: flex;
     background-color: black;
     height: 80px;
     justify-content: right;
     align-items: center;
     margin-bottom: 50px;
     border-bottom: 1px solid white;
}
 nav ul li {
     display: inline-block;
     list-style-type: none;
     margin-right: 20px;
}
 .nav-links{
     color: white;
     font-size: 18px;
}
 .banner {
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 500px;
     width: 100%;
}
 .banner-text-container {
     max-width: 30%;
     font-size: 22px;
}
 span {
     color: #11cc9e;
}
 .consultation-link{
     color: #11cc9e;
     text-decoration: none;
     margin-top: 30px;
     font-weight: 900;
     display: block;
     border: 1px solid white;
     max-width: 40%;
     text-align: center;
     padding: 5px;
}
 .consultation-link:hover{
     background-color: #fff;
}
 .about {
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 600px;
}
 .about-text-container {
     max-width: 40%;
     font-size: 22px;
     margin-left: 20px;
}
 .about-img{
     width: 400px;
     margin-right: 22px;
}
 .about-title {
     margin-bottom: 40px;
     width: 100% !important;
}
 .about-us-link{
     color: #11cc9e;
     text-decoration: none;
     margin-top: 30px;
     font-weight: 900;
     display: block;
     border: 1px solid white;
     text-align: center;
     max-width: 25%;
     padding: 5px;
}
 .about-us-link:hover{
     background-color: #fff;
}
 .join {
    /* */
}
 .join-header{
     width: 100%;
     text-align: center;
     margin-top: 75px;
     font-size: 40px;
}
 .container-boxes{
     position: relative;
     top: 0;
     bottom: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: center;
     min-height: 500px;
}
 .box {
     position: relative;
     overflow: hidden;
     transition: 0.5s;
     height: 200px;
     width: 300px;
}
 .box:hover{
     z-index: 1;
     transform: scale(1.25);
     box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
     cursor: pointer;
}
 .box .imgBX{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .box .imgBX img{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .box .imgBX:before{
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
     mix-blend-mode: multiply;
     opacity: 0;
     transition: 0.5s;
}
 .box:hover .imgBX:before {
     opacity: 1;
}
 .box .imgBX img{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .content{
     display: flex;
     flex-direction: column;
     text-align: center;
     position: absolute;
     top: 20%;
     bottom: 40%;
     width: 100%;
     height: 100%;
     z-index: 1;
     padding: 20px;
     visibility: hidden;
}
 .box:hover .content{
     visibility: visible;
}
/* Quote section */
 .quote-section {
     display: flex;
     justify-content: center;
     max-width: 100%;
     min-height: 500px;
}
 .quote-container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     align-items: center;
     justify-items: center;
     max-width: 50%;
     font-size: 22px;
     text-align: center;
}
 .quote {
     line-height: 90px;
     font-size: 150px;
     font-style: italic;
     color: #11cc9e;
     text-indent: -37px;
     font-weight: 600;
     width: 37px;
}
 .quote-img{
     width: 90px;
     margin: 40px auto;
}
 .person-name{
     color: #ccc;
}
 .person-role{
     font-size: 17px;
     color: #ccc;
}
 footer {
     text-align: center;
     margin-top: 100px;
     padding-top: 50px;
     max-width: 100%;
     min-height: 200px;
     border-top: 1px solid #fff;
}

@media only screen and (max-width: 1279px) {
     nav ul li {
         display: inline-block;
         list-style-type: none;
         margin-right: 20px;
         color: #11cc9e;
    }
}

@media only screen and (max-width: 880px){
     html{
         margin-left: 25px !important;
         margin-right: 25px !important;
    }
     .banner-text-container {
         max-width: 100%;
         font-size: 20px;
    }
     img{
         display: none;
    }
     .about-text-container {
         max-width: 100% !important;
         font-size: 22px;
    }
     .about-text-container {
         margin-left: 0px;
    }
     .about {
         display: inline;
    }
     .banner {
         display: inline;
         justify-content: space-around;
         width: 100%;
    }
     .consultation-link{
         color: #11cc9e;
         text-decoration: none;
         margin-bottom: 50px;
         font-weight: 900;
         display: block;
         border: 1px solid white;
         max-width: 100%;
         text-align: center;
         padding: 5px;
    }
     .about-us-link {
         color: #11cc9e;
         text-decoration: none;
         margin-top: 30px;
         font-weight: 900;
         display: block;
         border: 1px solid white;
         text-align: center;
         max-width: 100%;
         padding: 5px;
    }
     .join{
         display: none;
    }
     .join-header{
         display: none;
    }
     .quote-section{
         display: none;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Codes</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Source Sans Pro:wght@400;600&display=swap" rel="stylesheet">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <!-- insert logo -->
            <nav >
                <ul>
                    <li>About</li>
                    <li>Peer group</li>
                    <li>Review</li>
                </ul>
            </nav>
        </header>
        <section >
            <div >
                <h1>Build. Grow. <span >Learn.</span></h1>
                <p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
                <a  href="#">Free consultation </a>
            </div>
            <div >
                <img src="https://via.placeholder.com/400" alt="">
            </div>
        </section>
        <section >
            <div >
                <h2 >Who we are</h2>
                <p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
                <a  href="#">More about us </a>
            </div>
            <div >
                <img src="https://via.placeholder.com/400" alt="">
            </div>
        </section>
        <section >
            <h3  >Join a peer group!</h3>
            <div >
                <div >
                    <div > 
                        <img src="https://via.placeholder.com/400" alt="">
                    </div>
                    <div >
                        <h3>AI</h3>
                        <P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
                    </div>
                </div>
                <div >
                    <div >
                        <img src="https://via.placeholder.com/400" alt="">
                    </div>
                    <div >
                        <h3 >Frontend Dev</h3>
                        <p>Discover The Complete Range Of Frontend Solutions.</p>
                    </div>
                </div>
                <div >
                    <div >
                        <img src="https://via.placeholder.com/400" alt="">
                    </div>
                    <div >
                        <h3>Microsoft systems</h3>
                        <p>Discover The Complete Range Of Microsoft Solutions.</p>
                    </div>
                </div>
            </div>
        </section>
        <section >
            <div >
                <div >"</div>
                <p >In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups  that you can get the answers you are looking for.</p>
                <div >
                    <img src="https://via.placeholder.com/400" alt="">
                </div>
                <div >Peter Gangland </div>
                <div >Director of business dev at <span>Microsoft</span></div>
            </div>
        </section>
        <footer>
            <div id="contact">
                <h2>
                Contact us</h5>
                <h5>[email protected]</h5>
                <h5>831-867-5309</h5>
            </div>
            <div id="copyright">
                <h5>@copyright coded Enterprises 2022</h5>
            </div>
        </footer>
    </body>
</html>

CodePudding user response：

For making your website responsive you need to use media queries. It's like you tell the browser how to style your website in different sizes. I think your problem with your sections might also get solved if you try to make your website responsive.