boa tarde pessoal como solucionar? tenho um a pagina com uma nav e um footer gostaria que no main ficasse dividido em dois verticalmente . Um a parte cor azul e outra parte cor vermelha. como faço?
exemplo
xxxxxxxxxnav xxxxxxxxx
back 1 | back 2
xxxxxfooterxxxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" charset="utf-8" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title> ZEM </title>
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link rel="stylesheet" type="text/css" href="materialize/css/estilo.css">
</head>
<body>
<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.php" class="grey-text">Contato</a></li>
<li><a href="acesso.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.php">Contato</a></li>
<li><a href="acesso.html">Acesse</a></li>
</ul>
</div>
</nav>
<main>
<div class="row">
<div class=" col s12 m6 red"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
<div class=" col s12 m6 blue"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
</div>
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text"> Quer o zem na sua cidade? </h5>
<p class="grey-text text-lighten-4"> Faça parte deste movimento e preencha o formulário clicando abaixo.</p>
<a class="waves-effect waves-light btn green" href="assine.html"> Clique aqui</a>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text"> Siga nossas redes sociais</h5>
<ul class="social-icons ">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<br>
</ul>
<h6 class="white-text" >contato@souzem.com.br</h6>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container center">
© 2017 Sou Zem | Todos os direitos reservados.
</div>
</div>
</footer>
</body>
</html>
