why did my page suddenly move away from center?

Code

#vcontainer {

  display: table;

  height: 100%;

  width: 1000px;

}



#hcontainer {

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}



.menu {

  justify-content: center;

  text-decoration: none;

}



div.button {

  display: inline-block;

  margin-right: 20px;

}



.button a {

  text-decoration: none;

  font-size: 15px;

  border-radius: 20%;

  color: purple;

  font-family: fantasy;

  font-weight: bold;

  border: 5px solid purple;

  background: yellow;

}



.button a:hover {

  border: 10px solid Azure;

  background:#8A2BE2;

  font-size: 25px;

  color: Azure;

}



#lawOfficeName {

  display:inline-block;

  margin-top: 50px;

  font-size: 50px;

  font-family: fantasy;

  color: #B8860B;

  background-color: navy;

  padding-left: 15px;

  padding-right: 15px;

  border-color: #B8860B;

  border-style: solid;

  border-width: 15px;

  border-left: none;

  border-right:none;

  vertical-align: middle;

}



#main {

  background-color: navy;

  padding-bottom:30px;

  display:inline-block;

  text-align: center;

  padding-left:30px;

  padding-right: 30px;

  vertical-align: middle;

}

Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>John Doe</title>

    <link rel="stylesheet" href="styles.css">

  </head>

  <body>

    <div id="hcontainer">

      <div id="vcontainer">

        <div id="main">

          <h1 id="lawOfficeName">The Law Office of John Doe</h1>



          <br>



          <div class="menu">

            <div class="button">

              <a href="home.html">HOME</a>

            </div>

            <div class="button">

              <a href="#">TESTIMONIALS</a>

            </div>

            <div class="button">

              <a href="#">EXPERTISE</a>

            </div>

            <div class="button">

              <a href="#">EDUCATION</a>

            </div>

            <div class="button">

              <a href="#">CONTACT</a>

            </div>

            <div class="button">

              <a href="#">MINIMUSINGS</a>

            </div>

          </div>

        </div>



        <br>



        <div class="description">

          <p>John Doe, in his 30 years as an entertainment attorney, has done it all,</p>

          <p>including big-firm law practice (Loeb and Loeb, Mitchell Silberberg and Knupp), and in-</p>

          <p>house stints at companies ranging from Paramount Pictures (where he spent 12 years </p>

          <p>as a Senior Vice President) to independent film production and distribution companies.  </p>

          <br>

          <p>Whether you’re an individual, a medium-sized company or a mega-conglomerate, John</p>

          <p>Doe is ready to represent you in your film, television, music or Internet transaction.</p>

          <br>

          <p>Current and Recent Clients of The Law Office </p>

          <p>of John Doe include:</p>

          <br>

          <p> Lionsgate, Lucasfilm, Paramount Pictures, Walt Disney Records and Hollywood Records.</p>

        </div>







      </div>

    </div>

  </body>

</html>