My webpage splits an article which it shouldn’t when I resize it or use it on other platforms like Android devices or tablets. I tried using
<span></span>but still it is not working

The webpage cut the ‘<article>’ element and put it under the ‘<aside>’ element I tried searching for any results but nothing was found and if I used ‘position: fixed;’ the web page wouldn’t be responsive for smaller devices as android devices. I have launched my website using GitHub here is the link: https://kirubelyonas.github.io/Portfolio/

 <main>
        <section id="header">
            <div class="container">
                <header>
                    <h1 class="main-heading">Kirubel Yonas</h1>
                    <div class="main-subheading">Frontend developer.<br>Specialist in the <span class="word-highlight" style="width: 51px;"><span class="word">interactive</span></span>.</div>
                </header>
            </div>

            <div class="Z-container">
                <div class="K">K</div>
            </div>
        </section>
        <a href="#" class="scroll-down" address="truscrollsclass="scrols">SCROLL DOWN</p></a>
        <div id="socials">
            <a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYtJREFUeNrsVrttw0AMlZ0mZWpVzgYy1KSURtAIniDxBIomsDcIsoE2UBYQ7BHcqb1MYJMAD2CI0yWOxMQFH0CcfUdZz4+/SxKDwWAwGKZgMdcP5XmewbIDW4Ft+r7/uBmCQO4Vllps78EaIOr+jSCp9gaWjbicpqq5nKjagcihShU7LokchrsD3x3Yw58QRNXADiykLdgjqNR6H1JsTWFGvOCfgecK1RCLXHMUvpadn4nggu0VlAar3+Tm8gpyXUw1ykdOKqZmpxHiQiR/KB89vuQdqfXJzrPZQ+zDJ0g2YM/shVylMZ9EpsHcVcwr1LcY/F7CS7doIz6y0tXajCML7cd8xp5TC7Fj4fMV2tBaR3zUQ8yreC8qtA5UuvRRC/ExVMVYoSzvPCrYq3yvC1Sx0yBYxiYDn7eyP4Ymj9plITYZ5CT5bvKo3WaoAdei323YhFiLW05L5PSq+IdqhlrP1apx3E0hOAzDKU3Td/h4D/YUqHRs3sdbufJ7NRHbKaoZDAaDwTAfLgIMAFdlx4hMR+sjAAAAAElFTkSuQmCC" alt=""></a>
            <a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACcUlEQVRYR+2WT8gMYRzHv79hzBwcEOp1k4sau7XzEKXcFJJX1HsR5SBJiJSSmyTvwemlcJGTPzeRolzkwPbMztbOS9q3Vvay5d20KbPZmZ9Gs7VN3npmJmvVzGUu3+98P31/v2efJUz4QxPOhwIw74SKBosG8zaQ11/sYNHgUg0IIQ4y8y4ieiSlrAIIl9BSqVTaqOv6UQADx3FuRG/VZrPu4HIhxE0AZ+Kgl8w8T0TbAGxiZgPAAhFVmXkNER0CoAN4FQTBjOu638YNqJo3NkCybfsiEc2qkkU6Zr7f7XZPtVotX9WXacS2bZcBvCCiDapBse4ngCNSyieqvqyAl4nommpIQvdgcXHxpGqLqQEty1phGMYcEZ3ICPgOwH4p5VcVf2pAAMkTrJIzqnnr+/4Bz/O6KsYsgBBCXAVwRSXgD5q/O+Io0LbtPUT0NP5tS8t5Wkp5W9WUqUHLslaapnkLwDHVoFhX6/f7041G44uqLxNg9PFyubxe1/W7AKYVw7wgCI67rhtdi8pPKkAhRHRdnQ3DsFqr1d4AWFapVHZqmnYYwG4AmxPJHwG8B/C40+m8brfbP5TJYmEqwMgjhJhi5lkieiilfD78jhDiEoDrowDMfKfX651rNpv9tGBDfWrA+JDsIKILYRjOaZo2D2AKwD0A2xMgC4PBYF+9Xv80VkAA0V08Q0Tnmfk7EYXMvJWIVica/Axgr+M4H8YN+DsvOs2GYWwBsC6++koTBTiEEUKsBfAsOWJm/rcN/jeAADTLslaZpqmNjtj3/dDzvF6av/jJXc10irMufBZfAZiltVFP0WDRYN4G8vqLHczb4C/7mOIpIkOZIwAAAABJRU5ErkJggg==" alt=""></a>
            <a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACjUlEQVRYR+2VPYgTQRTH/y/OsbqcKChRNCCKkEjCxuwUVhbaHRwWorXFCcqpBEu/OLWwEPEaLey0EDlRsPAQbC3EIrNhvCYQEBsLEU6ihpNs9snARYLkYz/u4JCdbnfm/96P/3vzhrDBF21wPqSASSuUOpg6mNSBpPq0B1MHkzqQVP/f9aBwHMfSWv8a5UyhUNhh2/Z1AGeIaBLAIoArtVqtIaU80Ol0hNa6EcbdSA5WKpU9RHTX9/0bWutPgxI4jpMVQjwjouP9+8y8TESBge12u9V6vd4CYL5HrkiAruseAvCGiH4y81ml1AcA3J9BSjkL4OGgrMz8lYjeM/MLpdTTf7WDNJEAHcfZL4RYJCIDuhIEwTyAB57nfVkNLqSU9wFcGgK4zMyznucthIEzMSIBAhCu694jomofQAfAW2Z+GQTBUiaTMX13YUjdjOPTtVrt27jS9vYjAUopdwZBUCaiOSI6GjZJ37n1BSyXy3uFEK8BHI4BB2Ze8H1/ZtwU6I8dyUFTYinlVQC3YgJeU0rdiaKNCohisThpWdZtIroIYCJsMmY2F2lKKaXDauJcEqPZVKlUTmcymSkApwDYYRIy86NWq1VtNpu/w5yPdUl6IinlEQCvAOwOk4yZP/u+P621XgpzPkkP/tW6riuJyPTTsTGl7jDzOaXU47Czb00ATZBSqbTLsqybAM4PcWbFDGal1JMwz1qil0RKOcHMBwFsA7CPiE4AOAlg85BXo8nMM57nvYvjXKwezOVyW7LZrIG6TERyiGsfmXne9/3nUebdsN6MPGZ6gfL5/FbbtvMAtq/++95utxuNRuNH1Isw6nxswLWESAHX0820xEndTR1MHUzqQFJ92oNJHfwDKBTfKdId3rAAAAAASUVORK5CYII=" alt=""></a>
        </div>
        <section class="Detailholder">
            <aside>
                <section>
                    <div class="me"></div>
                        <h2>About me</h2>
                        <p class="skills">Hi, I am 17 years old. I started coding at the start of covid-19 pandemic and started with Arduino projects and continued with Front-end development, and now I am continuing with Back-end development.</p>
                    </div>
                </section>
            </aside>
            <article class="Details">
                <span>
                    <h2>Experience</h2>
                    <ul>
                        <li>
                            C++ (+4 years)
                        </li>
                        <li>
 ,,,                           HTML, CSS and JS (+2 years) - 
                         </li>
                        <li>
                            <p>PHP and SQL (0-1 years) 
                        </li>
                    </ul>
                </span>
                <section>
                    <h2>Other skills</h2>
                    <ul>
                        <li>
                            JavaScript Algorithms and Data Structures (Beta)
                        </li>
                        <li>
                            Responsive-Web Design
                        </li>
                        <li>
                            JS game development
                        </li>
                    </ul>
                </section>
          </article>
        </section>
        <section class="thefoot">
            <div class="footer">
                <p class="foot">©2024</p>
            </div>
        </section>
    </main>

This the Html file hoping you could give me any advice.

I tried using ‘<span></span>’, ‘<section></section>’ and nothing is working.