title: css w3-half same height issue
body: <p>I searched the forums but didn't find anything that helps my problem.</p>
  
  <p>How can I make one half-screen size the same as the other half with <code>CSS</code>? Plus both halves should fill the whole screen in height at the beginning too.</p>
  
  <p><a href="https://i.stack.imgur.com/U8BzF.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Raleway", sans-serif
  }
  
  body,
  html {
    height: 100%;
    line-height: 1.8;
  }
  
  .w3-bar .w3-button {
    padding: 16px;
  }
  
  .container {
    position: relative;
    width: 90%;
  }
  
  .img {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="w3-center"&gt;
    &lt;div class="w3-row"&gt;
      &lt;div class="w3-half w3-container w3-pink"&gt;
        &lt;p&gt;Some Text&lt;/p&gt;
        &lt;div class="w3-half w3-container"&gt;
          &lt;p&gt;Pics and some Text&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>