White space on the right side of my site that I can't get rid of

Question

I looked through similar issues other users have had, but none of the fixes have worked for me. I started on the site about a year ago and haven't touched it since. As the title suggests, there's a bit of white space on the right side of the site that I can't seem to get rid of.

 html * { font-family: 'Open Sans', sans-serif; margin: 0; } body{ } .header1 { background: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; background-size: cover; height: 100px; width: 100%; padding: 0; position: fixed; z-index: 1000; margin-right: -12px; margin-left: -12px; margin-top: -6px; } .header1 img { float: left; width: 258px; height: 56px; margin-left: 30px; margin-top: 44px; padding: 0; } ul#nav { list-style-type: none; height: 20px; margin-top: 73px; -webkit-padding-start: 40px; display: block; } a:link, a:visited { text-decoration: none; color: #FFFFFF !important; } ul#nav li.contact a { float: right; width: 100px; } ul#nav li.about a { float: right; width: 75px; } ul#nav li.search a { float: right; width: 100px; } .header2 { background: url(rockhdr.png) no-repeat top center fixed; background-size: cover; height: 600px; width: 100%; margin-right: -18px; margin-left: -8px; margin-top: -12px; padding: 0; } .box { background: no-repeat top center fixed; margin: auto; padding-left: -15px; padding-top: 275px; width: 400px; height: 100px; white-space: nowrap; position: relative; } .container-1 { width: 600px; height: 200px; vertical-align: middle; white-space: nowrap; position: relative; background: #000; margin-left: -85px; border-radius: 5px; } .container-1 input#search { width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #FFFFFF; margin-left: 150px; margin-top: 60px; padding-left: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .container-1 .icon { position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #FFFFFF; } .button { position: absolute; font-size: 12px; left: 150px; top: 60%; width: 148px; height: 20px; background: #ffff; border: none; border-radius: 5px; } .advbutton { position: absolute; font-size: 12px; left: 302px; top: 60%; width: 148px; height: 20px; background: #ffff; border: none; border-radius: 5px; } .container-1 input#search::-webkit-input-placeholder { color: #65737e; } .container-1 input#search:-moz-placeholder { /* Firefox 18- */ color: #65737e; } .container-1 input#search::-moz-placeholder { /* Firefox 19+ */ color: #65737e; } .container-1 input#search:-ms-input-placeholder { color: #65737e; } h1 { text-align: center; font-size: 50px; } #bottom-wrap { background: #000; } #bottom { width: 100%; height: 0; padding: 0 0 20%; background-size: 100%; background-repeat: no-repeat; background-size: cover; margin-left: auto; margin-right: auto; } .contact { color: #FFFFFF; text-align: center; } 

 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="fossils.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="fossils.js"></script> <div class='header_top'> <div class='header1'> <img src="GFS/images/eslogo.png" alt="logo" /> <ul id="nav"> <li class="contact"><a name="contact" href="#bottom" title="Contact">Contact</a></li> <li class="about"><a href="http:///" title="About">About</a></li> <li class="search"><a href="/" title="Search">Search</a></li> </div> </div> <div class='header_box'> <div class='header2'> <div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..." /> <form action="advancedsearch.html"> <input type="submit" class="advbutton" type="button" value="Advanced Search"> </form> <input class="button" type="button" value="Search"> </div> </div> </div> </div> <iframe src="https://truview.ortery.com/HTMLJavaScript/MotorBike/HTML5Viewer.html"></iframe> <h1>Catalogued Rocks</h1> <div id="bottom-wrap"> <div id="bottom"> <br> <br> <br> </div> </div> 

Help would be much appreciated!

Answer 1

Simply remove this from header1:

  margin-right: -12px;
   margin-left: -12px;
   margin-top: -6px;

The white margin you are referring to is just on your header container and nowhere else and the negative margin above was the cause of it.

 html * { font-family: 'Open Sans', sans-serif; margin: 0; } body{ } .header1 { background: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; background-size: cover; height: 100px; width: 100%; padding: 0; position: fixed; z-index: 1000; } .header1 img { float: left; width: 258px; height: 56px; margin-left: 30px; margin-top: 44px; padding: 0; } ul#nav { list-style-type: none; height: 20px; margin-top: 73px; -webkit-padding-start: 40px; display: block; } a:link, a:visited { text-decoration: none; color: #FFFFFF !important; } ul#nav li.contact a { float: right; width: 100px; } ul#nav li.about a { float: right; width: 75px; } ul#nav li.search a { float: right; width: 100px; } .header2 { background: url(rockhdr.png) no-repeat top center fixed; background-size: cover; height: 600px; width: 100%; margin-right: -18px; margin-left: -8px; margin-top: -12px; padding: 0; } .box { background: no-repeat top center fixed; margin: auto; padding-left: -15px; padding-top: 275px; width: 400px; height: 100px; white-space: nowrap; position: relative; } .container-1 { width: 600px; height: 200px; vertical-align: middle; white-space: nowrap; position: relative; background: #000; margin-left: -85px; border-radius: 5px; } .container-1 input#search { width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; float: left; color: #FFFFFF; margin-left: 150px; margin-top: 60px; padding-left: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .container-1 .icon { position: absolute; top: 50%; margin-left: 17px; margin-top: 17px; z-index: 1; color: #FFFFFF; } .button { position: absolute; font-size: 12px; left: 150px; top: 60%; width: 148px; height: 20px; background: #ffff; border: none; border-radius: 5px; } .advbutton { position: absolute; font-size: 12px; left: 302px; top: 60%; width: 148px; height: 20px; background: #ffff; border: none; border-radius: 5px; } .container-1 input#search::-webkit-input-placeholder { color: #65737e; } .container-1 input#search:-moz-placeholder { /* Firefox 18- */ color: #65737e; } .container-1 input#search::-moz-placeholder { /* Firefox 19+ */ color: #65737e; } .container-1 input#search:-ms-input-placeholder { color: #65737e; } h1 { text-align: center; font-size: 50px; } #bottom-wrap { background: #000; } #bottom { width: 100%; height: 0; padding: 0 0 20%; background-size: 100%; background-repeat: no-repeat; background-size: cover; margin-left: auto; margin-right: auto; } .contact { color: #FFFFFF; text-align: center; } 

 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="fossils.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="fossils.js"></script> <div class='header_top'> <div class='header1'> <img src="GFS/images/eslogo.png" alt="logo" /> <ul id="nav"> <li class="contact"><a name="contact" href="#bottom" title="Contact">Contact</a></li> <li class="about"><a href="http:///" title="About">About</a></li> <li class="search"><a href="/" title="Search">Search</a></li> </div> </div> <div class='header_box'> <div class='header2'> <div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..." /> <form action="advancedsearch.html"> <input type="submit" class="advbutton" type="button" value="Advanced Search"> </form> <input class="button" type="button" value="Search"> </div> </div> </div> </div> <iframe src="https://truview.ortery.com/HTMLJavaScript/MotorBike/HTML5Viewer.html"></iframe> <h1>Catalogued Rocks</h1> <div id="bottom-wrap"> <div id="bottom"> <br> <br> <br> </div> </div>