[craigOwnsYou]

I have been improving this web page and I want my page to be centered.
For some reason I think I added too much alignment and it screwed it up.

CSS:

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>

Could someone please help out? I'm trying to keep everything centered and had it that way for a minute but then I blew it.

If you want a recommendation for how I can improve the web page, please post that too (but obviously, answering my query comes first)!!!

[xeek]

I just tried testing it locally and for me it's not off-center, you could always use the developer tool to go through your CSS settings, see what they actually do on your site, sometimes you just miss small things.

Also I would recommend you to use Bootstrap for future projects, mobile first is everything these days! :)

[AwesomeZephyr]

it will be a crutch but ...
why did u use "table"? u should use flex-box'es in 2019

body {
    display: flex;
    justify-content: center;
}