Página com margem a direita ao diminuir tamanho de janela de navegador

gbilibio · Abril 19, 2019

Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do

navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:

Página HTML

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="UTF-8"/>
       <title>Aula 07</title>
       <link rel="stylesheet"
       type="text/css" href="style.css"/>
       <meta name="viewport"
       content="width=device-width,
       initial-scale=1.0"/>
   </head>
   <body>
       <header>
           <div class="contatos">
               <div class="cont">
                   <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
               </div>
               <div class="cont">
                   <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
               </div>
               <div class="cont">
                   <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
               </div>
           </div>
       </header>
       <div class="topo">
           <div class="contatos2">
               <div class="cont2">
                   <img align="right" src="logo.png">
               </div>
               <div class="cont2">
                   <p> HOME </p>
               </div>
               <div class="cont2">
                   <p> EMPRESA </p>
               </div>
               <div class="cont2">
                   <p> SERVIÇOS </p>
               </div>
               <div class="cont2">
                   <p> HOSPEDAGEM </p>
               </div>
               <div class="cont2">
                   <p> PORTIFÓLIO </p>
               </div>
               <div class="cont2">
                   <p> CONTATO </p>
               </div>
           </div>
       </div>
       <div class="banner">

       </div>
       <div class="banner2">

           <div class="banneresq">
           <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
           <div class="linhatexto">

           </div>
           <p>
           Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
           no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
           são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
           Bem para Atender Sempre.<br>
           </p>
           <div class="botaoentrar" >
           <h1>Entrar</h1>
           </div>
           </div>

           <div class="bannerdir">

           <img src="Imagens/bannerdireita2.jpg" width="320" height="280">

           </div>
       </div>
       <div class="banner3">

           <div class="caixamaior">
               <div class="caixa1">
                   <img src="Imagens/box1.jpeg" width="250" height="200">
                       <div align="center">
                           <p> CRIAÇÃO DE SITES </p>
                       </div>
                       <div class="caixa1texto">
                           <h1>
                           Temos desde sites simples de 1 página,<br>
                           modelos padrões e personalizados<br>
                           com páginas internas. Confira nossos<br>
                           modelos ou solicite um.<br>
                           </h1>
                       </div>
                       <div class="botaosaibamais">
                           <h1>Saiba Mais</h1>
                       </div>
               </div>
               <div class="caixa2">
                   <img src="Imagens/box2.jpg" width="250" height="200">
                       <div align="center">
                           <p> HOSPEDAGEM DE SITES </p>
                       </div>
                       <div class="caixa2texto">
                           <h1>
                           Hospede um site em um servidor<br>
                           confiável e de qualidade, que sempre<br>
                           lhe dê suporte necessário. Deixe seu<br>
                           site 100% online.<br>
                           </h1>
                       </div>
                       <div class="botaosaibamais">
                           <h1>Saiba Mais</h1>
                       </div>
               </div>
               <div class="caixa3">
                   <img src="Imagens/box3.jpg" width="250" height="200">
                       <div align="center">
                           <p> MANUTENÇÃO DE SITES </p>
                       </div>
                       <div class="caixa3texto">
                           <h1>
                           Mantenha seu site sempre atualizado,<br>
                           passando credibilidade aos seus<br>
                           clientes e ganhando ponto com o<br>
                           Google e outros buscadores.<br>
                           </h1>
                       </div>
                       <div class="botaosaibamais">
                           <h1>Saiba Mais</h1>
                       </div>

               </div>

           </div>

       </div>
   </body>
</html>

PÁGINA CSS

@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

header{
   width: 100%;
   height: auto;
   overflow: hidden;
   background-color: #023180;
   margin: auto;
}
body{
   margin: 0px;
}

.contatos{
   width: 100%;
   max-width: 900px;
   height: auto;
   overflow: hidden;
   margin: auto;
}

.cont{
   width: 33.3%;
   height: 40px;
   float: left;
}

.cont p{
   color:#ffffff;
   font-family: 'Muli';
   font-weight: 400;
}

.topo{
   width:80%;
   height:120px;
   float:right;

}

.cont2{
   font-family:'Cabin';
   color:#023180;
   width:13.3%;
   height:40px;
   float:left;

}

.cont2 p{
   font-size:15px;
   margin-left:100px;
   margin-top:30px;

}

.logo{
margin-left:350px;
margin-top:10px;
}

.banner{
   width:100%;
   height:500px;
   background:url(Imagens/banner.jpg);
   float:left;
   margin-top:30px;
}

.banner3{
   width:100%;
   height:500px;
   background-color:#083875;
   float:left;
   margin-top:50px;
   vertical-align: middle;
}

.caixamaior{
   width:100%;
   height:auto;

}

.caixamaior p{
   color:#FFFFFF;
   font-family:'Scada';

}

.caixa1texto h1{
   font-size:12px;
   font-family:'Karla';
   text-align:center;
   color:#FFFFFF;
}

.caixa2texto h1{
   font-size:12px;
   font-family:'Karla';
   text-align:center;
   color:#FFFFFF;
}

.caixa3texto h1{
   font-size:12px;
   font-family:'Karla';
   text-align:center;
   color:#FFFFFF;
}

.botaosaibamais{

   width:150px;
   height:50px;
   background-color:#21588E;
   text-align:center;
   vertical-align: middle;
   line-height: 3;
   margin-left:45px;
   margin-top:20px;
}

.botaosaibamais h1{
   font-family:'Scada';
   font-size:15px;
   color:#ffffff;
   vertical-align: middle;
}

.caixa1{
   margin-left:15%;
   margin-top:5%;
   float:left;
}

.caixa2{

   margin-left:10%;
   margin-top:5%;
   float:left;
}

.caixa3{
   margin-left:10%;
   float:left;
   margin-top:5%;
}

.banneresq{
   float:left;
   margin-left:120px;
   margin-top:65px;
}

.banneresq h1{
font-family: 'Oxygen';
}

.banneresq p{
   color:#3F3B3B;
   font-family: 'Oxygen';
   font-size:16px;
}

.linhatexto{
   width:75px;
   height:4px;
   background-color:#A11606;
   margin-top:-5px;
}

.botaoentrar{
   width:150px;
   height:50px;
   background-color:#800000;
   text-align:center;
   vertical-align: middle;
   line-height: 3;
}

.botaoentrar h1{
   font-family:'Oxygen';
   font-size:15px;
   color:#ffffff;
   vertical-align: middle;
}

.bannerdir{
   float:left;
   margin-top:60px;
   margin-left:70px;
}

@media only screen and (max-width: 600px){
   .cont{
       width: 100%;
   }
   .cont p{
       text-align: center;
   }

   .banner{
       width:100%;

   }
}

Eduardo Seiji · Abril 20, 2019

Sua classe .cont2 esta com width: 13.3%, e isso em uma tela acaba resultando em pouco espaço para o texto, e as tags p dentro delas, estao com margin-left: 100px. Voce precisa ajustar os media queries para dar folgar ao textos

Entrar

Arquivado

Página com margem a direita ao diminuir tamanho de janela de navegador

Pergunta

gbilibio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

1 resposta a esta questão

Recommended Posts

Eduardo Seiji 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante