I made a site that on the "responsive" cell phone is left side could someone help me? This is the code
HTML
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<meta name="author" content="Agencia de Marketing Digital Cmk">
<meta name="description" content=" Agencia de Marketing digital em São Paulo CMK é uma empresa de marketing digital, que oferece serviços marketing digital para empresas." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="robots" content="index, follow">
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/demo.css">
<link rel=”shortcut icon” href=”imagens/favicon.ico.png” type=”image”/x.png />
<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ var widget_id = '0EpwwNMTu9';var d=document;var w=window;function l(){
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
<!-- {/literal} END JIVOSITE CODE -->
<script language=“javascript” type=“text/javascript” src=“js/jquery.js”></script>
<title> Agencia de Marketing Digital - CMK</title>
<link rel="apple-touch-icon" sizes="57x57" href="icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="icon/manifest.json">
<meta name="msapplication-TileColor" content="#009fce">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#009fce">
</head>
<body>
<nav id="principal" class="fixed-nav" >
<ul>
<li><a href="index.html" target="_self">HOME</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank">(11) 94327-6380 </a></li>
<li><a href="#contato">SUPORTE</a></li>
<li><a href="#contato">ORÇAMENTO</a></li>
</ul>
</nav >
<nav>
<img src= "imagens/logo-cmk.png" alt="Agencia de Marketing Digital CMK Logotipo">
<ul>
<li><a href="index.html" target="_self">HOME</a></li>
<li><a href="#agencia">AGÊNCIA</a></li>
<li><a href="#servicos">SERVIÇOS</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contato">CONTATO</a></li>
</ul><br/><br/><br/><br/><br/>
</nav>
<header>
<a href="#servicos" target="_self" class="botao">VER MAIS</a>
<div class="social">
<ul>
<li><a href="https://www.facebook.com/agenciacmk.com.br/"target="_blank"><img src="icon/facebook.jpg" alt="facebook Agência de Marketing Digital" - cmk"></a></li>
<li><a href="https://www.youtube.com/channel/UCTGRquW0dLmYZl_HowZvzkw"target="_blank"><img src="icon/youtube.jpg" alt="youtube Agência de Marketing Digital" - cmk"></a></li>
<li><a href="https://br.linkedin.com/in/jeferson-marcelino-0795a6ab"target="_blank"><img src="icon/linkedin.jpg" alt="linkedin Agência de Marketing Digital" - cmk"></a></li>
<li><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank"><img src="icon/whatsapp.jpg" alt="whatsapp Agência de Marketing Digital" - cmk"></a></li>
<li><a href="https://academy.exceedlms.com/student/catalog"target="_blank"><img src="icon/partner.jpg" alt="whatsapp Agência de Marketing Digital" - cmk"></a></li>
<li><a href="#contato"target="_blank"><img src="icon/email.jpg" alt="email Agência de Marketing Digital" - cmk"></a></li>
</ul>
</div>
</header>
<section id="home">
<h2> Alta performance em inteligência de Marketing Digital.</h2>
<p> Você já tem um site, mas ninguém te encontra no Google ou fala sobre sua empresa nas redes sociais? <br/>
Você já tem um site que gera alguns contatos mas está precisando de muito mais?<br/>
Você já tem um site, mas ele não gera nenhum contato produtivo?<br/>
Você ainda não tem um site ou ele está obsoleto?</p>
<a href="#contato" class="botao">ENTRE EM CONTATO</a>
</section>
<section id="agencia">
<h2>AGÊNCIA</h2>
<h2>Alta performance em inteligência de Marketing Digital.</h2>
<a href="#contato" class="botao">ENTRE EM CONTATO</a>
</section>
<section id="servicos">
<h2>SERVIÇOS</h2>
<div class="efeito-grow">
<a href="criacao-de-site.html" target="_self"><img src="imagens/site.png" alt="Agência de Marketing Digital" - cmk"></a>
<h3>CRIAÇÃO DE SITE</h3>
</div>
<div class="efeito-grow" >
<a href="google-adwords.html" target="_self"><img src="imagens/links-patrocinados.png" alt="Links Patrocinados" - cmk"></a>
<h3> GOOGLE ADWORDS </h3>
</div>
<div class="efeito-grow" >
<a href="seo-otimizacao-de-sites.html" target="_self"><img src="imagens/consultoria.png" alt="Marketing Digital Consultoria"></a>
<h3>SEO - OTIMIZAÇÃO DE SITES</h3>
</div>
<div class="efeito-grow" >
<a href="anunciar-no-facebook-ads.html" target="_self"><img src="imagens/facebook-ads.png" alt="facebook Ads Consultoria"></a>
<h3>ANUNCIE NO FACEBOOK ADS</h3>
</div>
<div class="efeito-grow" >
<a href="consultoria-em-marketing-digital.html" target="_self"><img src="imagens/marketing-digital-consultoria.png" alt="Consultoria Markting digital"></a>
<h3>CONSULTORIA EM MARKETING DIGITAL</h3>
</div>
</section>
<section id="portfolio">
<h2>PORTFÓLIO</h2>
<ul class="portifolio">
<li>
<h2>E-Mail Marketing </h2>
<p>Além de ser uma excelente ferramenta para sua empresa é uma das maneiras de crescer seu negócio!
O email marketing é a comunicação entre uma empresa e seus consumidores ou potenciais clientes, via email.</p>
<br/><br/><br/><a href="e-mail-marketing.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul>
<ul class="portifolio">
<li>
<h2> Conteúdo Digital </h2>
<p>Marketing de Conteúdo é uma maneira de engajar com seu público-alvo e crescer sua rede de clientes e potenciais clientes através da criação de conteúdo relevante e valioso, atraindo, envolvendo e gerando valor para as pessoas de modo a criar uma percepção positiva da sua marca e assim gerar mais negócios.</p>
<br/><a href="conteudo-digital.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul>
<ul class="portifolio">
<li>
<h2>Google - Analytc </h2>
<p>O principal benefício de usar esta ferramenta é conseguir mensurar o desempenho de todos os canais de entrada do site, sendo eles por campanhas de email marketing, Google Adwords, tráfego orgânico(SEO).</p>
<br/><br/><br/><a href="google-analytc.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul><br/>
<ul class="portifolio">
<li>
<h2>Criação de Logomarcas </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
<br/><br/><br/><a href="criacao-de-logomarcas.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul>
<ul class="portifolio">
<li>
<h2>vídeos Corporativos </h2>
<p>Vídeo institucional é um meio de comunicação que diminui a distância entre empresas e consumidores, transmitindo maior confiança e gerando grandes resultados para sua marca.</p>
<br/><br/><br/><a href="videos-corporativos.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul>
<ul class="portifolio">
<li>
<h2>inbound marketing</h2>
<p>
Inbound Marketing é qualquer estratégia de marketing que visa atrair o interesse das pessoas. Também é chamado de marketing de atração e possui três grandes pilares: SEO, Marketing de Conteúdo e Estratégia em Redes Sociais.</p>
<br/><br/><a href="inbound-marketing.html" target="_self" class="botao">VER MAIS</a>
</li>
</ul>
</section>
<section id="contato">
<h1>CONTATO</h1>
<form method="post" id="fContato" action="contato@agênciacmk.com.br">
<fieldset id="geral">
<fieldset id="usuario">
<legend><h2>Identificação do Usuário</h2></legend>
<p><label for="cNome">Nome: </label><input type="text" name="tnome" id="cNome" size="20" maxlength="35" placeholder="Nome Completo"/></p>
<p><label for="cfone">Telefone: </label><input type="tel" name="TFone" id="cfone" required="required" maxlength="15" name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" /></p>
<p><label for="cmail">E-mail: </label><input type="email" name="tMail" id="cmail" size="20" maxlength="40"/></p>
</fieldset>
<fieldset id="assunto">
<legend><h2>Assunto</h2></legend>
<input type="radio" name="tBola" id="Ccria"/> <label for="Ccria">Criação de Site</label><br/>
<input type="radio" name="tBola" id="Cgoo"/> <label for="Cgoo">Google Adwords</label><br/>
<input type="radio" name="tBola" id="Cface"/> <label for="Cface">Facebook ADS</label><br/>
<input type="radio" name="tBola" id="Cconsu"/> <label for="Cconsu">Cosultoria em Marketing Digital </label>
</fieldset>
<input type="submit" value="Enviar" />
</fieldset>
</form>
</section>
<footer >
<div id="a-b-c">
<div class="box">
<h3>MENU RÁPIDO </h3><hr>
</a>
<p><a href="index.html" target="_self"> → Home ← </a></p>
<p><a href="criacao-de-site.html" target="_self"> → Criação de Site ← </a></p>
<p><a href="google-adwords.html" target="_self"> → Google Adwrords ← </a></p>
<p><a href="seo-otimizacao-de-sites.html" target="_self"> → SEO - Otimização de Site ← </a></p>
<p><a href="anunciar-no-facebook-ads.html" target="_self"> → Anuncie no Facebook ADS ← </a></p>
<p><a href="consultoria-em-marketing-digital.html" target="_self"> → Consultoria em Marketing Digital ← </a></p>
</div>
<div class="box left">
<img src= "icon/icon-whatsapp-01.png"> <img src= "icon/icon-tel-01.png"> <img src= "icon/icon-endereco-01.png"> <img src= "icon/icon-face-01.png">
<h3>ENDEREÇO | SUPORTE</h3><hr>
<p><a href="#contato" class="botao"> Suporte. </a></p>
<p><a href="https://www.facebook.com/agenciacmk.com.br/"target="_blank"> Facebook. </a></p>
<p> contato@agênciacmk.com.br . </p>
<p><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank"> Tel: (11) 94327-6380|98320-9602. </a></p>
<p>Segunda a Sexta | Das 9:00Hs às 18:00Hs.</p>
<p> R: Campo das Pitangueiras N°540 | Sala 34 - SP.</p>
</div>
<div class="box left">
<h3>ACESSO RÁPIDO</h3><hr>
<p><a href="e-mail-marketing.html" target="_self"> → E-mail Marketing ← </a></p>
<p><a href="conteudo-digital.html" target="_self"> → Conteúdo Digital ← </a></p>
<p><a href="google-analytc.html" target="_self">→ Google - Analytc ← </a></p>
<p><a href="criacao-de-logomarcas.html" target="_self"> → Criação de Logomarcas ← </a></p>
<p><a href="videos-corporativos.html" target="_self"> → vídeos Corporativos ← </a></p>
<p><a href="inbound-marketing" target="_self">→ inbound marketing ← </a></p><br/>
</div>
<div>
<p>Copyright © Todos os direitos reservados Agência de Marketing Digital - CMK 2018 </p><hr>
</div>
</div>
</ul>
</footer>
</body>
</html>
CSS
/*GERAL*/
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #4d4d4d;
}
h1, h2, h3 {
margin: 0;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.botao {
color: #f1f1f1;
text-decoration: none;
padding: 10px 30px;
background-color: #747d8c;
font-size: .9em;
border-radius: 3px;
}
/*NAVEGAÇÃO*/
nav {
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
margin: 23px 0px 0px 0px;
}
nav img {
padding: 0px;
margin: 0px 0px 0px;
}
nav > a {
text-decoration: none;
font-weight: 700;
font-size: 28px;
font-family: Pacifico, serif;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
nav ul li {
text-align: center;
width: 100%;
padding: 0px;
}
nav ul li a {
display: inline-block;
padding: 0px;
width: 100%;
text-decoration: none;
color: #2d3436;
}
nav a:hover {
background:#497daf;
color:#ffffff;
padding: 0px;
}
/*
NAVEGAÇÃO MENU FIXO CSS3
*/
nav.fixed-nav {
position: fixed;
width:100%;
top:0;
left:0px;
z-index:999;
}
/*
FORMATAÇÃO DO MENU 1
*/
#principal {
display: flex;
flex-direction: column;
align-items: center;
background-color: #747d8c;
margin: 0px 30px 0px 0px;
}
#principal > a {
text-decoration: none;
font-family: Pacifico, serif;
}
#principal ul {
list-style: none;
padding: 0px 0;
display: flex;
flex-direction: row;
align-items: flex-start;
width: 50%;
margin: 12px;
}
#principal ul li: {
width: 100%;
text-align: center;
}
#principal ul li a {
display: inline-block;
padding: 0px 0;
width: 100%;
text-decoration: none;
color: #ffffff;
font-weight: 300;
font-size: 11px;
margin: 0px 50px 0px 0px;
}
#principal a:hover {
background:#ffffff;
color:#353b48;
}
/*
IMAGENS REDES SOCIAIS
*/
#principal ul img {
width: flex;
height: flex;
position: absolute;
top: 15px;
left:1000px;
}
/*
CABEÇALHO
*/
header {
background-image: url('../imagens/fundo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #1e272e;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 100px;
}
header a {
margin-top: 80px;
}
/*HOME*/
#home {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 5px 20px 20px 0px;
background-color: #497DAF;
color: #f1f1f1;
}
#home p {
margin-bottom: 0.5em;
max-width: 1000px;
}
#home .botao {
background-color: #f1f1f1;
color: #4d4d4d;
margin-top: 0px
}
/*
AGÊNCIA
*/
#agencia {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f5f6fa;
}
#agencia div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 30px;
}
/*
SERVIÇOS
*/
#servicos {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 5px;
}
#servicos h2 {
margin-bottom: 20px;
}
#servicos img {
width: 40%;
}
/*
SERVIÇOS FOTOS
*/
.efeito-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.1s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.efeito-grow:hover, .efeito-grow:focus, .efeito-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*
PORTFOLIO
*/
#portfolio {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f5f6fa;
}
#portfolio {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 30px;
}
#portfolio h2 {
margin-bottom: 20px;
}
#portfolio img {
width: 100%;
}
/*
SERVIÇOS PORTFOLIO
*/
.portifolio {
position: center;
width:310px;
height:200px;
margin-right: 5px;
margin-left: 50px;
margin-bottom: 50px;
text-align: justify-content;
background-color:rgba(26,76,110,0.5)
}
.portifolio li{
list-style: none;
}
.portifolio:hover{
background:#53a7ea;
}
.portifolio:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.portifolio p,.portifolio h2, .portifolio a{
color:#fff;
left:-20px;
top:20px;
position:relative;
}
.portifolio p {
font-family:'Lato';
font-size:14px;
line-height:18px;
margin:0
}
.portifolio h2 {
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;
}
.portifolio a {
font-family: "Roboto Slab",
font-size:16px;
line-height:24px;
padding: 10px; 10px 10px 10px;
}
/*
CONTATO
*/
#contato {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0px;
margin: 0 auto;
}
/*
FOOTER
*/
footer {
display: flex;
text-align: center;
padding: 10px;
background-color: #747d8c;
color: #f1f1f1;
}
/*
FOOTER LADO A LADO
*/
.box {
width: 330px;
height: auto;
float: left;
text-align
}
div#a-b-c {
width: 1050px;
height: auto;
margin: auto;
}
div#a-b-c h3 {
text-align: left;
display: inline;
}
div#a-b-c p {
text-align: height;
display: block;
font-size: 14px;
}
.left {
margin-left: 20px;
}
.box a {
text-decoration:none;
color:#FFFFFF;
}
/*
MEDIA QUERIES
*/
@media screen and (min-width: 0px) and (max-height: 1200px) {
/*
NAVEGAÇÃO
*/
nav {
flex-direction: row;
justify-content: space-around;
}
nav ul {
flex-direction: row;
width: 70%;
}
/*
CABEÇALHO
*/
header {
height: 600px;
height: 60vh;
justify-content: center;
}
/*
SOBRE
*/
#sobre {
height: 250px;
height: 30vh;
justify-content: center;
min-height: 250px;
}
/*
SERVIÇOS
*/
#servicos {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
#servicos h2 {
text-align: center;
width: 100%;
}
#servicos div {
flex-grow: 1;
flex-basis: 150px;
padding: 0 10px;
}
/*
PORTFOLIO
*/
#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33.3333333333%;
}
/*
CONTATO
*/
#contato {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
max-width: 500px;
min-width: 360px;
margin: 0 auto;
}
#contato h2,
#contato p {
width: 100%;
}
}