keeping div in the same position along with window resize-CodePudding

This content moves along with the window resize and I'm trying to make it stay in place. Is there any way to stop the content from moving or should I move the section along with window resize so that it appears in the same position?

Pictures of the content in [@media only screen and (min-width: 992px) and (max-width: 1199px)]
width: 1198 px
width: 992 px

The partial code

#hero {
    height: 100%;
    position: relative;
    float: left;
    padding: 18% 10% 35% 6%;
    margin: 0 5% 0% 5%;
    width: 90%;

}

.IntroText {
    margin-left: auto;
    margin-right: auto;
    color:black;
    padding-bottom: 1.5%;
    font-size: 20px;
    transform: translateX(-20px);
    transition: transform 1s, opacity 1s;
    transition-delay: 0.5s;
}

.MyName {
    color:#fad25a;
}

.knowMore {
    left: 0.4%;
    font-weight: bold;
    font-size: 20px;
    transform: translateX(-20px);
    transition: transform 1s, opacity 1s;
    transition-delay: 1s;
}

button, .talkButton {
    color: #d4af37;
    padding: 5px 25px;
    border: 2px solid #d4af37;
    position: relative;
    margin: auto;
    z-index: 1;
    overflow: hidden;
    transition: 0.3s;
}

button:after, .talkButton:after {
    content: '';
    background-color: #252526;
    position: absolute;
    z-index: -2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

button:before, .talkButton:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #d4af37;
    transition: 0.3s;
    z-index: -1;
}
button:hover, .talkButton:hover {
    cursor: pointer;
    color: #252526;
}
button:hover:before, .talkButton:hover:before {
    width: 100%;
}

button:focus, .talkButton:focus {
    outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero" >
            <div >
            <h1 >
                Lorem Ipsum dolor <span >sit amet</span> and<br> consecteuer
            </h1>
            <button type="button" id="knowbutton"  onclick="toAbout()">Know more</button>
        </div>
    </section>

CodePudding user response：

In the CSS file, in the #hero rule set you have given padding and margins in percentages. It means whenever the screen changes then the padding and margin apply according to that screen(in percentages).

try by fixing padding and margins in the #hero rule set

CodePudding user response：

You could do a position: fixed

#hero {
    height: 100%;

    position: fixed;
    top: 100px;
    left: 50px;

    padding: 18% 10% 35% 6%;
    margin: 0 5% 0% 5%;
    width: 90%;

}

Now it is always going to stay in the same position(100px from the top, 50px from the left), even if you scroll.