Div moves over other one on diferent device scales

Question

So I have this problem, I have Static web page, and i have header section and few others. But currently right now. Whatever section i set to be under the header section, its just move over the header.

This is first time this is happening, and i cant reslove it. On first i tought its problem in browser, but it is same on every one that i tried.

I think it is problem in the image on header section so i placed it above the txt section on the header, but section below header stil overlaps on the header.

Soo I double checked all code on header and I think there was nothing wrong that could cause this.

header {
        margin: auto;
        height: 100vh;
    }
    .navigation-menu {
        z-index: 10000;
        display: flex;
        align-items: center;
        background: #fff;
        box-shadow: 0 1px 1px #333;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        padding: 20px 20px;
    }
    .navigation-menu nav ul {
        word-spacing: 10px;
    }
    .navigation-menu nav ul li {
        list-style-type: none;
        display: inline-block;
    }
    .navigation-menu nav ul li a {
        font-size: 19px;
    }
    /*
     ===== Hamburger Menu =====
    */
    .navigation-menu .hamburger {
        padding: 5px;
        position: relative;
        display: none;
        cursor: pointer;
        right: 40px;
        border: none;
        background: none;
        outline: none;
        appearance: none;
    }
    .navigation-menu .hamburger .bar {
        transition: .3s ease all;
        position: relative;
        display: block;
        margin-bottom: 5px;
        width: 30px;
        height: 3px;
        background: #333;
        border-radius: 26px;
    }
    .hamburger.is-active .bar:nth-last-child(1) {
        transform: rotate(-45deg) translate(4px, -5px);
    }
    .hamburger.is-active .bar:nth-last-child(2) {
        transform: translateX(-10px);
        opacity: 0;
    }
    .hamburger.is-active .bar:nth-last-child(3) {
        transform: rotate(45deg) translate(6px, 8px);
    }
    .mobile-menu {
        transition: .3s ease all;
        transform: translateX(100%);
        position: fixed;
        display: none;
        align-items: center;
        justify-content: space-around;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 120px;
        height: 100vh;
        z-index: 2;
        background: #fff;
    }
    .mobile-menu.menu-show {
        transform: translateX(0%);
    }
    .mobile-menu ul {
        word-spacing: 10px;
    }
    .mobile-menu ul li {
        list-style-type: none;
    }
    .mobile-menu ul li a {
        font-family: 'Playfair Display', serif;
        margin-bottom: 5px;
        transition: .3s ease all;
        font-size: 45px;
    }
    .mobile-menu ul li a:hover {
        color: red;
    }
    @media (max-width:533px) {
    .navigation-menu nav {
        display: none;
    }
    .navigation-menu .hamburger {
        display: block;
    }
    .mobile-menu {
        display: flex;
    }
    }
    /*
     ===== Hamburger Menu =====
    */


    .heading__container {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .heading__content {
        position: relative;
        margin: 6%;
        display: block;
    }
    .heading__title h1{
        font-weight: 900;
        text-transform: uppercase;
        font-size: 55px;
    }
    .heading__title h1 span {
        color: red;
    }
    .heading__subtitle p{
        font-size: 22px;
    }
    .heading__subtitle {
        max-width: 600px;
        width: 100%;
    }
    .heading__image {
        padding: 1em;
        position: relative;
        text-align: center;
    }
    .heading__image img {
        max-width: 400px;
        width: 100%;
    }
    .heading__button-box .btn__read  {
        background: red;
        border: solid 1px red;
    }
    .heading__button-box .btn__read a {
        color: #fff;
    }
    .heading__button-box .btn__react {
        position: relative;
    }
    .heading__button-box .btn__react::before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        background: red;
        z-index: -1;
        height: 0;
        transition: .3s ease all;
        width: 100%;
    }
    .heading__button-box .btn__react:hover::before {
        height: 100%;
    }
    .heading__button-box button {
        margin-bottom: 1%;
        margin-right: 5%;
    }
    .heading__button-box .btn__react a {
        transition: .3s ease all;
    }
    .heading__button-box .btn__react:hover {
        border: solid 1px red;
    }
    .heading__button-box .btn__react:hover a {
        color: #fff;
    }
    .heading__button-box .btn__react {
        border: solid 1px red;
    }
    .h__wrapper  {
        margin-top: 50px;

    }
    .h__wrapper .h__button {
        display: inline-block;
        overflow: hidden;
        height: 60px;
        width: 60px;
        float: left;
        border-radius: 50px;
        cursor: pointer;
        margin: 10px 5px;
        transition: .3s ease all;
        box-shadow: 0 2px 12px #333;
    }
    .h__wrapper .h__button:hover {
        width: 200px;
    }
    .h__wrapper .h__button .icon {
        height: 60px;
        width: 60px;
        transition: .3s ease all;
        border-radius: 50px;
        text-align: center;
        line-height: 60px;
        box-sizing: border-box;
        display: inline-block;
    }
    .h__wrapper .h__button .icon i {
        font-size: 25px;
        line-height: 60px;
    }
    .h__wrapper .h__button span {
        font-size: 20px;
        line-height: 60px;
        margin-left: 10px;
        font-weight: 500;
    }
    .h__wrapper .h__button:nth-child(1) .icon {
        background: #fff;
    }
    .h__wrapper .h__button:nth-child(1):hover .icon {
        background: rgb(126, 168, 245);
    }
    .h__wrapper .h__button:nth-child(1):hover .icon i{
        color: #fff;
    }
    .h__wrapper .h__button:nth-child(2) .icon {
        background: #fff;
    }
    .h__wrapper .h__button:nth-child(2):hover .icon {
        background: rgb(214, 146, 20);
    }
    .h__wrapper .h__button:nth-child(2):hover .icon i{
        color: #fff;
    }
    .h__wrapper .h__button:nth-child(3) .icon {
        background: #fff;
    }
    .h__wrapper .h__button:nth-child(3):hover .icon {
        background: #333;
    }
    .h__wrapper .h__button:nth-child(3):hover .icon i{
        color: #fff;
    }

<header>
        <div class="navigation-menu">
            <a href="#" class="logo"><img src="../assets/images/logo/Anima.png" alt=""></a>
            <nav>
                <ul>
                    <li><a href="#" class="to-sides">Home</a></li>
                    <li><a href="#services" class="to-sides">Services</a></li>
                    <li><a href="#about" class="to-sides">About</a></li>
                    <li><a href="#works" class="to-sides">Works</a></li>
                    <li><a href="#projects" class="to-sides">Projects</a></li>
                </ul>
            </nav>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
        <nav class="mobile-menu">

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#works">Works</a></li>
                <li><a href="#projects">Projects</a></li>
            </ul>

        </nav>
        <section class="heading__container">
            <div class="heading__content">
                <div class="heading__title">
                    <h1><span>Emanuel</span> <br> Rajic</h1>
                </div>
                <div class="heading__subtitle">
                    <p>I am 16 years old Front-end developer and CS Student</p>
                </div>
                <div class="heading__button-box">
                    <button class="btn__read"><a href="#">Read More</a></button>
                    <button class="btn__contact btn__react"><a href="#">Get In Touch</a></button>
                </div>
                <div class="h__wrapper">
                    <div class="h__button">
                        <div class="icon"><i class="fab fa-twitter"></i></div>
                        <span><a href="">Twitter</a></span>
                    </div>
                    <div class="h__button">
                        <div class="icon"><i class="fab fa-instagram"></i></div>
                        <span><a href="">Instagram</a></span>
                    </div>
                    <div class="h__button">
                        <div class="icon"><i class="fab fa-github"></i></div>
                        <span><a href="">Github</a></span>
                    </div>
                </div>
            </div>
            <div class="heading__image">
                <img src="../assets/images/header/valentin-salja-0aX51h4WvAk-unsplash.jpg">
            </div>
        </section>
</header>

Answer 1

A combination of z-index:10000, which will give this element priority over everything (so being on top all the time), and position:fixed, which will make that element have a fixed position in the said place no matter the scrolling are, the culprits. Removing those two CSS properties would fix your "issue".