When I try to make the website responsive with CSS at a max-width of 400 px, all the elements or all the **body **goes to the left and I can’t put it in the middle of the page, how can I solve this problem?
Thank you for helping.

This is am image describing the problem

here is a code about one section, but the problem applied to all

<div class="hero-section">
        <div class="left">
            <h1>Small crowd but seek <strong>big IMPAKT</strong> ? <br /><span>we got you !!!</span></h1>
            <p>With our expert team your brand is our N1 priority. <br />When you pick us you pick
                thriving, bc your
                success is ours too, so let us walk you there with a free consultation.</p>
            <a href="#">Request Concultation</a>
        </div>
        <div class="right">
            <img src="images/Hero.png" alt="Marketing"/>
        </div>
    </div>

.hero-section {
    width: 80%;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 50px;
    gap: 50px;
    background-color: #fe796719;
    border-radius: 20px;}

.hero-section .left h1 {
    font-family: Fraunces;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    font-size: 45px;
    margin-bottom: 40px;}

.hero-section .left h1 span {
    color: #ef5e41;}

.hero-section .left p {
    font-size: 20px;
    line-height: 1.5;}

.hero-section .left a {
    display: inline-block;
    font-size: 30px;
    font-family: fraunces;
    padding: 15px 25px;
    margin: 50px auto;
    cursor: pointer;
    background-color: #ef5e41;
    border-radius: 30px;
    border: none;
    color: #fff;}

@media screen and (max-width:400px) {
    .hero-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;}

    .hero-section .left {
        text-align: center;}

    .hero-section .left h1 {
        font-size: 30px;
        margin-bottom: 20px;}

    .hero-section .left p {
        color: black;
        line-height: 1.5;
        font-size: 18px;}

    .hero-section .left a {
        font-size: 25px;}  
}

I trayed to make the width 100% but nothing changed.
The only thing that moved the body from its place is giving it a margin left or giving it a Specific width of 700px for example. Because it’s look like when I set the media query’s max width at 400px the body also take the same width.