title: CSS Inner Div Fill Outer Div
body: <p>I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.</p>
  
  <p>I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me.  I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.</p>
  
  <p>I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and <code>text-decoration</code> rules.</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;Some other stuff&lt;/span&gt;
  &lt;/div
  &lt;div class="outer-container"&gt;
      &lt;h2&gt;
          &lt;a class="inner-container" href="https://www.google.com" target="_blank"&gt;
              Lorem ipsum
          &lt;/a&gt;
      &lt;/h2&gt;
  &lt;/div&gt;
  &lt;div&gt;
      More different stuff
  &lt;/div&gt;
  </code></pre>
  
  <p>I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!</p>
  
  <pre><code>.outer-container {
    background-color: #337AB7;
    text-align: center;
    vertical-align: middle;
    position: relative;
  }
  
  .inner-container {
    background-color: #337AB7;
    color: #fff;
    height: 100%;
    font-size: x-large;
    &amp;:focus, &amp;:hover, &amp;:link {
      background-color: #286090;
      color: #fff;
      text-decoration: none;
    }
  }
  </code></pre>
  
  <p>If I put the <code>focus</code>, <code>hover</code> CSS stuff in the <code>outer-container</code> the hover mechanics are not consistent.</p>
  
  <p>I hope I'm making sense...like I said, I have a horrible time explaining design stuff.</p>
  
  <p>Any suggestions?</p>