The width of my site is not equal, header is smaller than the rest. How to resolve?

Asked

Viewed 130 times

1

The width of my site is not the same as can be seen below:

ias bordas e backgrounds são para melhor visualização minha na hora de mexer com margin e padding

The header (logo bar, navigation and main image) is smaller than the content of the site, I am using Bootstrap. The CSS with the measures is like this:

    @media (min-width: 1200px) {
    .container{
        max-width: 790px;
    }
}

@media (min-width: 992px) {
    .container{
        max-width: 790px;
    }
}

body {
    margin-top: 10px;
    font-family: Verdana;
    font-size: 12px;
    color: #727E55;   
}

.container, .container-fluid {
    background-color: #fff;   
}

.row {
    margin-bottom: 3px;
}

[class*="col-"], header, .row-nav, .img-rolante, footer, div[role="main"] {
    margin-top: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #f5f5f5;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
    /*text-align: center;*/
}

div[role="main"], footer {
    background-color: #fff;
    height: auto;
}

HTML

<!DOCTYPE html>
<html lang="pt-br">
    
<head>
    <title>Lorem Ipsum</title>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <!-- CSS do Index -->
    <link href="css/contato.css" type="text/css" rel="stylesheet">
    <link href="css/geral.css" type="text/css" rel="stylesheet">
    <!-- META -->  
</head> 

<body>    
    <div class="container">         
        
        <header>
        <div class="masthead">
            <div class="img-header">
                <a class="logo" href="#">LoremIpsum.Com</a>
            </div>   
            
            <nav>
                <ul class="nav nav-justified">    
                    
                    <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CASAS</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li> 
                    
                    <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CHÁCARAS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li> 
                    
                     <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SÍTIOS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li> 
                    
                    <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FAZENDAS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li> 
                    
                    <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">POUSADAS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li>     
                    
                    <li class="imagem dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TERRENOS <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">São Paulo</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Rio de Janeiro</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Minas Gerais</a></li>
                        </ul>
                    </li> 
                    
                    <li class="imagem"><a href="#">CONTATO</a></li>
                    
                </ul> 
            </nav>   
                    
            <div class="img-rolante">
            <marquee scrollamount=2
       behavior=alternate direction="right">
                <img src="imagem/Contato/smantiqueira22.jpg" width="1236" height="182"/>     
            </marquee>
        </div>
        </div>
        </header>    

        <div class="row">           

            <div role="main" class="col-md-12">
                <h1>Contato <span class="icones"><a href="#"><span class="glyphicon glyphicon-home"></span></a> <a href="#"><span class="glyphicon glyphicon-envelope"></span></a></span></h1>                
                <div>                    
                </div>                
            </div>
            
        </div>
        
        <footer class="row">
                        
            <div class="img-footer">
            </div>
            
            <p style="font-size: 8px; margin-top: 5px; margin-bottom:2px"> <img style="margin-left: 10px; margin-right: 10px" src="imagem/Index/informacao.gif" /> <!--<span class="glyphicon glyphicon-earphone" style="margin-left: 10px; margin-right: 10px"></span> +55 12 3971.1150 --> <span class="linkt1">TERMOS DE USO</span> Web Design &amp; Development by <a class="linkt1" href="mailto:[email protected]">LoremIpsum.Com</a> © 2003 | All 
      rights reserved | <span class="linkt1">CRECI SP XXXXX 
      - CRECI MG XXXXX</span> </p>
            
            <p style="font-size: 11px; margin-bottom:3px"> Encontre seu Imóvel na <a class="linkt2" href="terrasdamantiqueira.com">LoremIpsum.Com</a>
            </p>
            
            <p style="font-size:8px; margin-bottom:1px">
                <a href="#" class="linkt1">CASAS A VENDA</a> | 
                <a href="#" class="linkt1">CHÁCARAS A VENDA</a> |
                <a href="#" class="linkt1">SÍTIOS A VENDA</a> |
                <a href="#" class="linkt1">FAZENDAS A VENDA</a> |
                <a href="#" class="linkt1">POUSADAS A VENDA</a> |
                <a href="#" class="linkt1">TERRENOS A VENDA</a>
            </p>
            
            <p style="font-size:11px"><a href="#" class="link3">CLIQUE AQUI</a> e Cadastre seu Imóvel a Venda conosco</p>
            
        </footer>  
        
    </div>    

    <!-- jQuery (necessario para os plugins Javascript Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

I don’t know how to fix it, so the header has the same width as the rest of the layout.

PS.: the edges and background darker is for better viewing my margin and padding. I am using Html5, css3 and bootstrap.

  • It would be interesting to put the html for the staff to view, because it gets a little complicated to say something.

  • try to put by percentages %

  • Send the html we help you with

  • I did! @marciano.Andrade

  • I posted @Charlie Sousa-Jr

1 answer

0


To solve your problem I added a div with the class="row" around the header. Thus remaining:

<body>    
    <div class="container">        
        <div class="row">       
        <header>

I did this because I noticed that the Divs below this one were inside a Row, but the header was not. In this link you can see how it looked: https://jsfiddle.net/7m447ymn/

Note: If you don’t want the margins you can remove the Row class from all the Divs and create something of your custom.

  • Wow, thank you so much! I’ve been trying to fix this for two days and I couldn’t do it! .

Browser other questions tagged

You are not signed in. Login or sign up in order to post.