Responsive Site with side left

2

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)&nbsp94327-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">  &rarr; Home &larr; </a></p>
             <p><a href="criacao-de-site.html" target="_self"> &rarr; Criação de Site &larr;  </a></p>
             <p><a href="google-adwords.html" target="_self"> &rarr; Google Adwrords &larr;  </a></p>
             <p><a href="seo-otimizacao-de-sites.html" target="_self"> &rarr; SEO - Otimização de Site &larr;  </a></p>
             <p><a href="anunciar-no-facebook-ads.html" target="_self"> &rarr; Anuncie no Facebook ADS &larr;  </a></p>
             <p><a href="consultoria-em-marketing-digital.html" target="_self"> &rarr; Consultoria em Marketing Digital &larr;  </a></p>


        </div>


        <div class="box left">

            <img src= "icon/icon-whatsapp-01.png">&nbsp; <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"> &rarr; E-mail Marketing &larr;  </a></p>
             <p><a href="conteudo-digital.html" target="_self"> &rarr; Conteúdo Digital &larr;  </a></p>
             <p><a href="google-analytc.html" target="_self">&rarr; Google - Analytc &larr;  </a></p>
             <p><a href="criacao-de-logomarcas.html" target="_self"> &rarr; Criação de Logomarcas &larr;  </a></p>
             <p><a href="videos-corporativos.html" target="_self"> &rarr; vídeos Corporativos &larr;  </a></p>
             <p><a href="inbound-marketing" target="_self">&rarr; inbound marketing &larr;  </a></p><br/>


        </div>

        <div>
            <p>Copyright &copy; 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%;
    }

}
    
asked by anonymous 23.07.2018 / 22:26

1 answer

0

The margin issue is that you have not deleted the default margin from body . To resolve, just include in your CSS margin: 0 to body :

body{
   margin: 0;
}

Only nav that occupies the entire width because you put fixed in the position property of it. fixed does not meet body margins. The rest of the page will fit within the default range of body , so spaces not only on the sides. If you go down the entire site you will see that there is also a spacing on the bottom border.

    
23.07.2018 / 22:40