some parts of my site are not responsive how do i fix it?

herer is my css, i tried to add media query and put the width to 100% but it didn't help  the problem.

.main_content {
    display: flex;
    justify-content: center;
}

.main_content h1 {
    margin-top: 80px;
    display: inline-block;
    width: 50vw;
    text-align: center;
    font-family: "henny penny";
    color: #995932;
}

.main_content p {
    margin-top: 10px;
    display: inline-block;
    font-family: "roboto";
    color: #995932;
    background-color: #fdc8a8;
    width: 50vw;
    height: 50vh;
    padding: 30px 30px;
    text-align: justify;
    line-height: 4.5vh;
    box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}

.sub_content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.sub_content div {
    width: 40vw;
    margin: 20px;
}

.sub_content h2 {
    text-align: center;
    font-family: "henny penny";
    color: #9c9c27;
}

.sub_content p {
    text-align: justify;
    font-family: "roboto";
    color: #aaaa36;
    padding: 40px 40px;
    background-color: #ffff99;
    line-height: 3.5vh;
    box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}

.mayor_content h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    font-family: "henny penny";
    color: #5a873b;
}

.mayor_content div {
    margin: 0 auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
    background-color: #b6db9d;
    box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}

.mayor_content div h3 {
    margin-bottom: 20px;
    font-family: "henny penny";
    color: #5a873b;
}

.mayor_content div p {
    display: inline-block;
    text-align: justify;
    width: 35vw;
    height: 20vh;
    color: #547c39;
}

.mayor_content img {
    width: 150px;
    height: 200px;
    position: relative;
    bottom: 300px;
    left: 570px;
    image-rendering: crisp-edges;
}

the html seems organized but if i could order it more then i would be happy to.

<main>
        <section>
            <div class="main_content">
                <div>
                    <h1>Mardi Gras in New Orleans</h1>
                    <p>The holiday of Mardi Gras is celebrated in all of Louisiana, including the city of
                        New
                        Orleans.
                        Celebrations
                        are
                        concentrated for about two weeks before and through Shrove Tuesday, the day before Ash Wednesday
                        (the
                        start
                        of
                        lent in the Western Christian tradition). Usually there is one major parade each day (weather
                        permitting);
                        many
                        days have several large parades. The largest and most elaborate parades take place the last five
                        days of
                        the
                        Mardi Gras season. In the final week, many events occur throughout New Orleans and surrounding
                        communities,
                        including parades and balls </p>
                </div>

            </div>
            <div class="sub_content">
                <div>
                    <h2>Traditional colors</h2>
                    <p>The colors traditionally associated with Mardi Gras in New Orleans are green, gold,
                        and
                        purple. The
                        colors
                        were first specified in proclamations by the Rex organization during the lead-up to their
                        inaugural
                        parade
                        in 1872, suggesting that balconies be draped in banners of these colors. It is unknown why these
                        specific
                        colors were chosen; some accounts suggest that they were initially selected solely on their
                        aesthetic
                        appeal, as opposed to any true symbolism.</p>
                </div>

                <div>
                    <h2>Costumes and masks</h2>
                    <p>In New Orleans, costumes and masks are seldom publicly worn by non-Krewe members on
                        the
                        days before Fat
                        Tuesday (other than at parties), but are frequently worn on Mardi Gras. Laws against concealing
                        one's
                        identity with a mask are suspended for the day. Banks are closed, and some businesses and other
                        places
                        with
                        security concerns (such as convenience stores) post signs asking people to remove their masks
                        before
                        entering.</p>
                </div>
            </div>
        </section>
        <div class="break_point2"></div>
        <section class="mayor_content">
            <h2>Mayor of New Orleans</h2>
            <div>
                <h3>LaToya Cantrell</h3>
                <p>LaToya Cantrell born April 3, 1972 is an American politician serving as the Mayor of New
                    Orleans, Louisiana, a post she has held since May 7, 2018. A Democrat, Cantrell is the first woman
                    to
                    hold the post. Before becoming mayor, Cantrell represented District B on the New Orleans City
                    Council
                    from 2012–2018.</p>
            </div>
            <img src="./images/mayor.jpeg" alt="LaToya Cantrell">
        </section>
    </main>