Background-color isn't responsive-CodePudding

I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section). The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background. I don't know if I'm explain it well but here is my code and the bug that I have:

* {
    font-family: 'Fredoka', sans-serif;
    margin: 0%;
    padding: 0%;
}

body {
    background-color: #3a5056;
    color: white;
    text-align: center;
}

html,
body {
    height: 100%;
}

.middle {
    background-color: white;
    height: 1866px;
    padding: 50px;
    margin-top: 230px;
}

.cards-list {
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.card {
    margin: 30px auto;
    width: 300px;
    height: 300px;
    border-radius: 40px;
    box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: 0.4s;
}

.card .card_image {
    width: inherit;
    height: inherit;
    border-radius: 40px;
}

.card .card_image img {
    width: inherit;
    height: inherit;
    border-radius: 40px;
    object-fit: cover;
}

.card .card_title {
    text-align: center;
    border-radius: 0px 0px 40px 40px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    margin-top: -80px;
    height: 40px;
    color: #2c3d42;
}
section .intro {
    height: 40px;
    width: 850px;
    padding: 6%;
}

.intro {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    min-width: 850px;
}

.intro:nth-child() {
    align-self: center;
}

.abt-me {
    position: relative;
    width: 800px;
    height: 250px;
    padding: 1%;
    color: #2c3d42;
    display: block;
    content: "";
    margin-top: -2550px;
    border: 1px hidden;
    font-size: 18px;
    border-radius: 40px;
    box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}

.text-box {
    padding: 1%;
    margin-top: -8px;
    font-size: 21px;
    width: 750px;
    height: 250px;
    margin-left: 2%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <title></title>
</head>

<body>
    <section >
        <div id="name">
            <h1>Hello, I'm <span id="me">Sapph</span></h1>
        </div>
        <div id="scroll">
            <section id="section02" >
                <a href="#cards"><span></span></a>
            </section>
        </div>
        <nav >
            <ul>
                <li><a href="">Twitter <i ></i></a></li>
                <li><a href="">Github <i ></i></a></li>
                <li><a href="">Linkedin <i ></i></a></li>
            </ul>
        </nav>
    </section>
    <section >
        <div id="cards">
            <div >
                <div >
                    <div ></div>
                    <div >
                        <p>Contact</p>
                    </div>
                </div>
                <div >
                    <div >
                    </div>
                    <div >
                        <p>Projects</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    <section >
        <div >
            <h2 style="margin-bottom: 12px" ;><b>
                About Me</b>
            </h2>
            <div >
                <p>
                    <center>Hello, I'm...</center>
                </p>
            </div>
        </div>
    </section>
    <footer>&copy Copyright</footer>
</body>

</html>

This is my problem: https://prnt.sc/w4Zkw0QU7P67

This is what I need: https://prnt.sc/UhNmn4djohPS

I took the photos in the developer tools. Thanks

CodePudding user response：

Try to find the @media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.

@media only screen and (max-width: 890px) {
    section{
        margin: 0px;
        padding: 10px;
    }
}

If you want to change the section style for all screen widths just use:

@media only screen and (min-width: 360px) and (max-width: 1360px) {
    section{
        margin: 0px;
        padding: 10px;
    }
}