Trying to fit my webpage to the browser

There is over 1000 pixels spare shared between the left and right of the webpage. I have googled stuff and tried what was offered, but still hasn’t worked. Someone please try to figure it out? Here is the code, thanks

<html>

  <head>
    <title>The Boon Exchange</title>
    <style>

    /* Login/Register Bar Starts */
          #loginRegister {
          width: 1375px;
          height: 44px;
          background-color: 252525;
          position: relative;
          left: 63px;
          top: -8px;
          }

          #familyOwnedBusiness {
          color: #C0C0C0;
          font-weight: 700;
          position: relative;
          left: 585px;
          top: 11px;
          font-style: oblique;
          font-size: 20;
          }

          #loginRegisterText {
          color: C0C0C0;
          position: relative;
          left: 1057px;
          top: -25px;
          }


    /* Login/Register Bar Finishes*/


    /* Banner Menu Starts */
          #banner {
          width: 270px;
          height: 80px;
          background-color: black;
          position: relative;
          left: 50px;
          top: 16px;
          }

          #bannerHead {
          font-family: Oxygen, sans-serif;
          border: 4px solid #000000;
          border-color: #000000;
          position: relative;
          left: 63;
          top: -8;
          width: inherit;
          height: 110px;
          background-color: black;
          border-width: 3px;
          }

          #bannerOptionsDiv {
          border-top-color: #000000;
          border-bottom-color: #000000;
          border-right-color: #000000;
          width: 550px;
          height: 112px;
          position: relative;
          left:801px;
          top:-113px;
          padding:20px;
          }

          .options {
          position: relative;
          top: 25;
          left: 9.7;
          font-size: 14;
          text-align: center;
          font-weight: 700;
          color: C0C0C0;
          }
    /* Banner Menu Finishes */

</style>
  </head>

  <body>

    <!-- Login/Register Bar Starts -->
        <div id="loginRegister">
          <div id="familyOwnedBusiness"
            <p>A Family Owned Business
          </div>
          <p id=loginRegisterText><span style='word-spacing: 10px;'> Login <span style="color: #2B2B2B">|</span> Create</span><span style='word-spacing: 0.5;'> a FREE account!</span></p>
        </div>
    <!-- Login/Register Bar Finishes -->

    <!-- Banner Menu Starts -->
        <div  id="bannerHead">
          <img src="boon_exchange_logo.png" alt="The Boon Exchange" id="banner">
          <div id="bannerOptionsDiv">
            <br />
            <p class="options"><span style='word-spacing: 25px;'>HOME SUBSCRIBE FAQS </span><span style='word-spacing: 0.5;'> ABOUT US</span></p>
          </div>
        </div>
    <!-- Banner Menu Finishes -->

  </div>
  </body>

</html>

You have several left: properties defined with 500px or 1000px which add to the dimensions of the page. You’ll probaby have to use a responsive unit like percentages if you want it responsive.

Im a beginner, any way to simplify what you said?

I want it to look as it is, except for the huge margins or sides (dont mind the missing photo)