CV - elementy w kontenerze

pytanie zadane 16 maja 2023 w HTML i CSS przez Mil.B Nowicjusz (240 p.)

Siemka, chciałam poćwiczyć sobie css-a no i wzięłam się za robienie dość prymitywnego cv. Po wielu godzinach ustawiania wszystkiego (jestem w tym kiepska, dopiero sie ucze xD) udało mi sie wszystko poustawiać. Problem jest teraz taki, że gdy zmniejszam ekran to wszystko sie rozjeżdża w każdą możliwą stronę i nie mam pojęcia jak zrobić, żeby cv po zmniejszeniu wyglądało tak jak przed zmniejszeniem. Dodaje swój kod, sorki bo wszystko jest napisane strasznie chaotycznie i troche nijako . PROSZĘ O JAKIEŚ RADY!!!!!!!!

<body>
    <section class="cialo">

        <header>
            <h1 class="cv">CV</h1>
            <img id="profil" src="zdjęcie.jpg">
            <div id="opis">
                <h1>MILENA BIERNACKA</h1>
                <p>Jestem młodą osobą, która tak naprawdę dopiero poszukujeswojej drogi zawodowej. Nigdy nie byłam
                    nigdziezatrudniona,
                    ale zawsze łapałam się każdej możliwej pracyjaka tylko była. Nie boję się wyzwań i jestem gotowa
                    nakażdą
                    możliwą
                    posadę : &#10099; Szybko się uczę i jestem pracowitąoraz sumienną osobą,
                    do swoich obowiązków podchodzę zniezwykłą dokładnością i zaangażowaniem.</p>
            </div>
        </header>


        <section>
            <div class="lewa-strona">
                <h3>KONTAKT</h3>

                <li><img src="smartphone-call.png">

                    +48 535 992 584
                </li>

                <li><img src="email.png">
                    milenabiernacka910@gmail.com
                </li>
            </div>
            <div class="to">
                <h3>ZAINTERESOWANIA</h3>
                <ul id="gora">
                    <li><img src="cooking.png"> gotowanie</li>
                    <li><img src="horse.png"> jazda konna</li>
                    <li><img src="web-programming.png"> programowanie</li>
                </ul>
            </div>

            <div id="edu-i-jez" class="lewa-strona">
                <h3>EDUKACJA</h3>
                <ul>
                    <li>
                        <a href="https://szkolalowyn.edupage.org/">Zespół Szkolno-Przedszkolny w Łowyniu</a>:
                        2011/12 -
                        2018/19
                    </li>
                    <li>
                        <a href="https://zstmiedzychod.edupage.org/">Zespół Szkół Techniczych w Międzychodzie</a>:
                        2019/20 -
                        2021/22
                    </li>
                    <li>
                        <a href="https://zs2miedzychod.edupage.org/">Liceum Ogólnokształcące dla Dorosłych
                            Uzupełniające</a>:
                        2022/23 - obecnie
                    </li>
                </ul>
            </div>
            <div class="to" id="edu-i-jez">
                <h3>JĘZYKI</h3>
                <ul id="gora">
                    <li><img src="eng.png">
                        angielski
                    </li>
                </ul>
            </div>


        </section>

    </section>

</body>

</html>

body {
    background: linear-gradient(pink, rgb(0, 229, 255), rgb(241, 95, 241));

}

header {
    display: flex;
    height: 600px;
    flex-wrap: wrap;

}

header img#profil {

    height: 500px;
    width: 370px;
    border-radius: 48%;
    border: rgb(220, 53, 81) 2px solid;
    align-self: flex-end;
    margin-top: -100px;
    margin-left: 30px;

}




header h1.cv {
    align-self: flex-start;
    display: inline-block;
    margin-left: 55%;
    font-size: 200px;
    margin-bottom: -26px;
    margin-top: -5px;

}


header div#opis {
    height: 300px;
    width: 550px;
    text-align: center;
    background: linear-gradient(pink, rgb(239, 98, 121));
    border-radius: 50px 20px 50px 20px;
    align-self: center;
    margin-left: 40px;
    margin-top: 50px;
}

p {
    letter-spacing: 5px;
    font-size: large;
    font-weight: bold;
}


.cialo {
    width: 50%;
    height: 1100px;
    background-color: white;
    margin-left: 25%;
    display: flex;


    align-items: center;

}


section {
    margin-left: 15px;
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-self: flex-end;
}



section div {
    display: inline;
    width: 490px;
    height: 170px;
    align-items: center;
    background-color: rgb(216, 155, 175);

}

h3 {
    text-align: center;
    margin-bottom: -10px;
}


li img {
    width: 30px;
    height: inherit;
    margin-bottom: -10px;
    margin-top: 20px;
}


li {
    list-style-type: none;
    text-align: center;
}


ul li {
    margin-left: -40px;
}


ul#gora {
    margin-top: -10px;
}



#edu-i-jez {
    margin-top: 20px;
    margin-bottom: 30px;
}




div.lewa-strona {
    margin-left: -15px;
}