Estou utilizando o framework css materialize ao criar o formulário não consigo centralizar . Ao criar div , ele centraliza mais nao fica responsive fica todo modificado. Como corrigir?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<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">
<style>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</style>
</head>
<body>
<!--
.espaco{
margin: 15px;
width: 100%;
margin-left:495px;
}
-->
<nav>
<div class="nav-wrapper container">
<a href="home.html" class="brand-logo">Logo</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">Quem Somos</a></li>
<li><a href="corporativo.html">Corporativo</a></li>
<li><a href="ajuda.html">Ajuda</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="acesso.html">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="ajuda.html">Ajuda</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="acesse.html">Acesse</a></li>
</ul>
</div>
</nav>
<main>
<div class="row">
<br>
<br>
<h6> Em caso de dúvida ou solicitar oraçmento, por favor entre em contato conosco preenchendo o formulário abaixo.</h6>
<br>
<form class="col s10 ">
<div class="row">
<div class="input-field col s10">
<!-- <i class="material-icons prefix">account_circle</i> -->
<input id="icon_prefix" type="text" class="validate" required>
<label for="icon_prefix " >Nome Completo</label>
</div>
<div class="input-field col s10">
<!-- <i class="material-icons prefix">account_circle</i> -->
<input id="icon_prefix" type="text" class="validate" required>
<label for="icon_prefix ">Telefone</label>
</div>
<div class="input-field col s10">
<!-- <i class="material-icons prefix">account_circle</i> -->
<input id="icon_prefix" type="text" class="validate" required>
<label for="icon_prefix ">E-mail</label>
</div>
<div class="input-field col s10" >
<select >
<option value="" disabled selected>Escolha uma opção</option>
<option value="1">Solicito orçamento</option>
<option value="2">Dúvidas</option>
<option value="3">Sistema com problema</option>
<option value="4">Aplicativo com aplicativo</option>
<option value="5">Sugestão</option>
<option value="5">Outros</option>
</select>
</div>
<div class="input-field col s10">
<textarea id="textarea1" class="materialize-textarea" data-length="1000"></textarea>
<label for="textarea1"> Digite aqui sua mensagem </label>
</div>
<div class="input-field col s10 center">
<br>
<button class="btn waves-effect waves-light light-green darken-4" type="submit" name="action">Enviar<i class="material-icons right">send</i></button>
</div>
</div>
</form>
</div>
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
</div>
<!-- Scripts-->
<script type="text/javascript" src ="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script src="min/plugin-min.js"></script>
<script>
$( document ) .ready(function(){
$(".button-collapse").sideNav();
})
</script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>