[craigOwnsYou]

I really want to make my title center. I think that I need to do that to make it look neat.

For some reason the title of the page, made using h1 tag, stretches across the web page and I intended for it to explicitly not do that.

HTML code:

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">

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

        <br>
        <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>

        <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>

CSS code:

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 blue;
  background:cyan;
  font-size: 25px;
  color: blue;
}

#lawOfficeName {
  justify-content: center;
  margin-top: 50px;
  font-size: 50px;
  font-family: fantasy;
  color: cyan;
  background-color: navy;
}

I really want to make sure I get it working because I want to end up with something decent for my dad.

---

UPDATE!!! I fixed it. I just had to set it to display as an inline block.