2

Fiz um site "responsivo" que no celular fica sobrando lateral, alguém poderia me ajudar?

Segue o codigo 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%;
    }

}
1
  • Como você é um membro novo da comunidade, sugiro que leia esses tópicos de ajuda: como perguntar e como criar um exemplo. Não adianta postar todo o código se não fizer dele um exemplo que mostre o que está acontecendo, daí não conseguimos te ajudar Commented 23/07/2018 às 20:30

1 Resposta 1

0

O problema da margem é que você não eliminou o margin padrão do body. Para resolver basta incluir no seu CSS margin: 0 ao body:

body{
   margin: 0;
}

Só o nav que ocupa a largura toda porque você colocou fixed na propriedade position dele. O fixed não obedece às margens do body. O resto da página irá se ajustar dentro da margem padrão do body, por isso os espaços não apenas nas laterais. Se você descer todo o site verá que também há um espaçamento na borda inferior.

8
  • Ops! Muito obrigado pela ajuda, realizei o procedimento mais ainda sim tem espaço, eu achava a princípio que fosse o formulário, refiz ele e melhorou um pouco o espaço mais ainda sim tem...Teria alguma outra sugestão? Desde já obrigado. Commented 25/07/2018 às 22:39
  • Eu teria que ver o site. Ele tá online?
    – Sam
    Commented 25/07/2018 às 22:46
  • www.agencia.cmk.com.br por gentileza analisa ele no dispositivo móvel. Commented 26/07/2018 às 16:43
  • O link não abriu.
    – Sam
    Commented 26/07/2018 às 17:29
  • Estava actualizando acho quando tentou abrir - www.agenciacmk.com.br por gentileza pode vericar agora obrigado.. Commented 28/07/2018 às 19:45

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .