keeping div in the same position along with window resize

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" class="jumbotron">
            <div class="container">
            <h1 class="IntroText animated">
                Lorem Ipsum dolor <span class="MyName">sit amet</span> and<br> consecteuer
            </h1>
            <button type="button" id="knowbutton" class="knowMore animated" onclick="toAbout()">Know more</button>
        </div>
    </section>