background tela 2 cores vertical

Boa tarde gostaria de saber como faço a tela de fundo fcar com 2 cores 50 % cada uma verticalmente ? Estou utilizando materalize

<nav>
    <div class="nav-wrapper container">

      <a href="home.html" class="brand-logo"><img src="materialize/img/zem.png" class="responsive-img"></a>

      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">

                    <li><a href="quemsomos.html" class="grey-text">Quem Somos</a></li>
                    <li><a href="corporativo.html" class="grey-text">Corporativo</a></li>
                    <li><a href="contato.html" class="grey-text">Contato</a></li>
                    <li><a href="acesse.html" class="grey-text">Acesse</a></li>

      </ul>
      <ul class="side-nav" id="mobile-demo">

                    <li><a href="quemsomos.html">Quem Somos</a></li>
                    <li><a href="corporativo.html">Corporativo</a></li>
                    <li><a href="contato.html">Contato</a></li>
                    <li><a href="acesse.html">Acesse</a></li>

      </ul>
      </div>
 </nav>



                  <main class="red accent-2 ">

                  <div >
                   <h1> Acesse o zem </h1>
                  </div>


                  </main>

                  <main class= "yellow left">
                   <h1> Acesse o zem </h1>
                  </main>



 <footer class="page-footer">