翻译I'm currently attempting to keep my header menu fixed at the top of the screen, even when scrolling. The issue is that whenever I set the position to fixed, it loses it's centering, and margin has no effect on it. I want to be able to center the element while still enabling it to automatically center itself when the page is resized or viewed by a smaller resolution.
The HTML and CSS in question:
*{ margin: 0; padding: 0; } h1{ font: bold 20px Tahoma } h2{ font: bold 20px Tahoma } header, section, footer, aside, nav, article { display: block; } html{ height: 100%; background: rgb(143, 143, 143); } body{ width: 100%; display: flex; justify-content: center; } #big_wrapper{ margin: 0 0; display: flex; flex-direction: column; flex: 100%; } #top_header{ position: fixed; text-align: center; height: 120px; background: rgb(45,45,45); /*border-bottom: 15px solid rgba(79, 79, 79, 0.4);*/ border-radius: 8px; padding: 10px; /*box-shadow: rgb(30, 30, 30) 10px 10px 10px;*/ font-family: Impact, sans-serif; font-size: 40px; color: white; } #centering_example{ color: #a00d01; font-size: 45px; text-shadow: rgba(0,0,0,.5) -3px 3px 0; } #new_div{ display: flex; flex-direction: row; } #main_section{ position: relative; z-index: -1; top: 140px; max-width: 1200px; border-top-left-radius: 10px; border-top-right-radius: 10px; flex: 1; margin: auto; margin-top: 20px; padding: 20px; background: #3c3c3c; box-shadow: rgb(30, 30, 30) 10px 10px 10px; } #the_footer{ position: relative; top: 140px; max-width: 1200px; margin: auto; text-align: center; padding: 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top: 1px solid black; background: #3c3c3c; box-shadow: rgb(30, 30, 30) 10px 10px 10px; } #SELECTED{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36,34,31, 0.6); box-shadow: rgba(0,0,0,1) 0 0 0;; padding: 9px 18px; border-radius: 8px; color: #f8f8f8; font-size: 16px; text-decoration: none; vertical-align: middle; } .media_button{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; background: rgba(69, 69, 69, 0.8); padding: 3px 8px; border-radius: 8px; box-shadow: rgba(0,0,0,1) 3px 3px 0; color: #787878; font-size: 13px; text-decoration: none; vertical-align: middle; } .media_button:hover{ background: rgba(59,59,59, 0.6); box-shadow: rgba(0,0,0,1) 2px 2px 0; color: #f8f8f8; } .media_button:active { border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36, 34, 31, 0.6); box-shadow: rgba(0, 0, 0, 1) 0 0 0; } .button{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; background: rgba(69, 69, 69, 0.8); padding: 9px 18px; border-radius: 8px; box-shadow: rgba(0,0,0,1) 3px 3px 0; color: #787878; font-size: 16px; text-decoration: none; vertical-align: middle; } .button:hover{ background: rgba(59,59,59, 0.6); box-shadow: rgba(0,0,0,1) 2px 2px 0; color: #f8f8f8; } .button:active{ border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36,34,31, 0.6); box-shadow: rgba(0,0,0,1) 0 0 0; }<div id="big_wrapper"> <header id="top_header"> <p id="centering_example">centering help</p> <a id="SELECTED" class="button" href="index.html">Home</a> <a class="button">Games</a> <a class="button">About us</a> <a class="button">Blog</a> </header> <div id="new_div"> <section id="main_section"> <article> <p>This is text for the index page of the website.</p> <br> </article> </section> </div> <footer id="the_footer"> <h6>Footer text</h6> <a class="media_button" href="https://www.twitter.com">Twitter</a> <a class="media_button" href="https://www.facebook.com">Facebook</a> <a class="media_button" href="http://steamcommunity.com">Steam Group</a> </footer> </div>