CSS

I do not have any parent or grandparent element with overflow: hidden.

<div class="header">
            <section class="top">
                <div class="links">
                    <ul>
                        <li><a href="#"><i class="ri-information-2-fill"></i></a></li>
                        <li><a href="#"><i class="ri-mail-fill"></i></a></li>
                        <li><a href="#"><i class="ri-twitter-fill"></i></a></li>
                        <li><a href="#"><i class="ri-facebook-fill"></i></a></li>
                        <li><a href="#"><i class="ri-youtube-fill"></i></a></li>
                    </ul>
                </div>
                <div class="profile">
                    <a href="#">
                        <span>Personal area</span>
                        <i class="ri-user-3-fill"></i>
                    </a>
                </div>
            </section>
            <header>
                <div class="wrapper">
                    <div class="logo-container">
                        <img src="logo/logo.png" alt="logo">
                    </div>
                    <nav class="nav-bar">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About us <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Services <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Blog <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Contact </a></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </div>

I have already tried the methods mentioned in other questions but they don’t work for me.
aaaa.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa