title: Why do my boxes go flat when I make them into a link
body: <p>I'm creating 4 boxes that represent a page. Right now, they show up correctly.
  <a href="https://i.stack.imgur.com/aIIXY.jpg" rel="nofollow noreferrer">See here</a></p>
  
  <p>That result was achieved by this code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div class="container"&gt;
          &lt;div class="boxes"&gt;
              &lt;div class="box carpet"&gt;
                  &lt;p&gt;Carpet Cleaning&lt;/p&gt;
  
                  &lt;img class="box" src="images/carpet.jpg" alt="carpet cleaning" /&gt;
                  &lt;img class="box box-overlay box-overlay-carpet" src="images/overlay.png" /&gt;
              &lt;/div&gt;
  
  
              &lt;div class="box upholstery"&gt;
                  &lt;p class="long-name"&gt;Upholstery Cleaning&lt;/p&gt;
  
                  &lt;img class="box" src="images/upholstery.jpg" alt="upholstery cleaning" /&gt;
                  &lt;img class="box box-overlay box-overlay-upholstery" src="images/overlay.png" /&gt;
              &lt;/div&gt;
  
              &lt;div class="box area-rug"&gt;
                  &lt;p class="long-name"&gt;Area Rug Cleaning&lt;/p&gt;
  
                  &lt;img class="box" src="images/area-rug.jpg" alt="area rug cleaning" /&gt;
                  &lt;img class="box box-overlay box-overlay-area-rug" src="images/overlay.png" /&gt;
              &lt;/div&gt;
  
              &lt;div class="box vct"&gt;
                  &lt;p&gt;VCT Cleaning&lt;/p&gt;
  
                  &lt;img class="box" src="images/vct.jpg" alt="vct cleaning" /&gt;
                  &lt;img class="box box-overlay box-overlay-vct" src="images/overlay.png" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background: #F2F2F2;
      font-family: Arial;
      font-size: 24px;
      margin: 0;
  }
  
  div {
      box-sizing: border-box;
  }
  
  .container {
      margin: 0 auto;
      width: 95%;
  }
  
  /***********/
  /* Content */
  /***********/
  
  .content {
      background: url("images/desert.jpg");
      background-size: cover;
      text-align: center;
  }
  
  .content .boxes {
      margin-top: 83px;
      background: black;
      overflow: hidden;
  }
  
  .content .box {
      width: 25%;
      position: relative;
      vertical-align: middle;
      float: left;
  }
  
  .content .box-overlay,
  .content .box p {
      position: absolute;
      left: 0px;
  }
  
  .content .box p {
      z-index: 100;
      display: inline;
      margin: 37% 25%;
      color: #ffffff;
      font-size: 150%;
  }
  
  .content .box .long-name {
      margin-right: 15%;
      margin-left: 15%;
  }
  
  .content .box img {
      width: 100%;
  }
  
  .content .box-overlay {
      opacity: 0.5;
  }
  
  .content .box-overlay-carpet {
      background: #00DAFF;
  }
  
  .content .carpet:hover {
      background: #00B0CC;
  }
  
  .content .carpet:hover &gt; p {
      color: #E5BF00;
  }
  
  .content .box-overlay-upholstery {
      background: #00FF21;
  }
  
  .content .upholstery:hover {
      background: #00CC17;
  }
  
  .content .upholstery:hover &gt; p {
      color: #E5BF00;
  }
  
  .content .box-overlay-area-rug {
      background: #FFD800;
  }
  
  .content .area-rug:hover {
      background: #CCAA00;
  }
  
  .content .area-rug:hover &gt; p {
      color: #E5BF00;
  }
  
  .content .box-overlay-vct {
      background: #FF2B00;
  }
  
  .content .vct:hover {
      background: #CC2100;
  }
  
  .content .vct:hover &gt; p {
      color: #E5BF00;
  }
  </code></pre>
  
  <p>However, I need the boxes to be clickable. So in the HTML, I simply removed the p elements and replaced them with a elements wrapping around the text and img elements. I also changed p elements in CSS to a elements.</p>
  
  <p>The result? Everything disappeared.</p>
  
  <p>I do realize that my knowledge of web development is in the growing phase, but I would like to know what's causing the style to break down from simply changing p elements to a elements.</p>
  
  <p>Here's the final code:</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="content"&gt;
         &lt;div class="container"&gt;
             &lt;div class="boxes"&gt;
                 &lt;div class="box carpet"&gt;
                  &lt;a href="#"&gt;
                      Carpet Cleaning
  
                      &lt;img class="box" src="images/carpet.jpg" alt="carpet cleaning" /&gt;
                      &lt;img class="box box-overlay box-overlay-carpet" src="images/overlay.png" /&gt;
                  &lt;/a&gt;
                 &lt;/div&gt;
  
  
                 &lt;div class="box upholstery"&gt;
                     &lt;a href="#" class="long-name"&gt;
                         Upholstery Cleaning
  
                      &lt;img class="box" src="images/upholstery.jpg" alt="upholstery cleaning" /&gt;
                      &lt;img class="box box-overlay box-overlay-upholstery" src="images/overlay.png" /&gt;
                  &lt;/a&gt;
                 &lt;/div&gt;
  
                 &lt;div class="box area-rug"&gt;
                     &lt;a href="#" class="long-name"&gt;
                         Area Rug Cleaning
  
                      &lt;img class="box" src="images/area-rug.jpg" alt="area rug cleaning" /&gt;
                      &lt;img class="box box-overlay box-overlay-area-rug" src="images/overlay.png" /&gt;
                  &lt;/a&gt;
                 &lt;/div&gt;
  
                 &lt;div class="box vct"&gt;
                     &lt;a href="#"&gt;
                         VCT Cleaning
  
                      &lt;img class="box" src="images/vct.jpg" alt="vct cleaning" /&gt;
                      &lt;img class="box box-overlay box-overlay-vct" src="images/overlay.png" /&gt;
                  &lt;/a&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background: #F2F2F2;
      font-family: Arial;
      font-size: 24px;
      margin: 0;
  }
  
  div {
      box-sizing: border-box;
  }
  
  .container {
      margin: 0 auto;
      width: 95%;
  }
  
  /***********/
  /* Content */
  /***********/
  
  .content {
      background: url("images/desert.jpg");
      background-size: cover;
      text-align: center;
  }
  
  .content .boxes {
      margin-top: 83px;
      background: black;
      overflow: hidden;
  }
  
  .content .box {
      width: 25%;
      position: relative;
      vertical-align: middle;
      float: left;
  }
  
  .content .box-overlay,
  .content .box a {
      position: absolute;
      left: 0px;
  }
  
  .content .box a {
      z-index: 100;
      display: inline;
      margin: 37% 25%;
      color: #ffffff;
      font-size: 150%;
  }
  
  .content .box .long-name {
      margin-right: 15%;
      margin-left: 15%;
  }
  
  .content .box img {
      width: 100%;
  }
  
  .content .box-overlay {
      opacity: 0.5;
  }
  
  .content .box-overlay-carpet {
      background: #00DAFF;
  }
  
  .content .carpet:hover {
      background: #00B0CC;
  }
  
  .content .carpet:hover &gt; a {
      color: #E5BF00;
  }
  
  .content .box-overlay-upholstery {
      background: #00FF21;
  }
  
  .content .upholstery:hover {
      background: #00CC17;
  }
  
  .content .upholstery:hover &gt; a {
      color: #E5BF00;
  }
  
  .content .box-overlay-area-rug {
      background: #FFD800;
  }
  
  .content .area-rug:hover {
      background: #CCAA00;
  }
  
  .content .area-rug:hover &gt; a {
      color: #E5BF00;
  }
  
  .content .box-overlay-vct {
      background: #FF2B00;
  }
  
  .content .vct:hover {
      background: #CC2100;
  }
  
  .content .vct:hover &gt; a {
      color: #E5BF00;
  }
  </code></pre>