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

Question

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

Asked 8 years, 8 months ago

Viewed 130 times

1

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

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.

– Carlinhos

2016/03/14 at 13:10
try to put by percentages %

– Gonçalo

2016/03/14 at 13:19
Send the html we help you with

– Marciano.Andrade

2016/03/14 at 14:41
I did! @marciano.Andrade

– Raquel Romão

2016/03/14 at 15:49
I posted @Charlie Sousa-Jr

– Raquel Romão

2016/03/14 at 15:49

1 answer

Browser other questions tagged html css html5 twitter-bootstrap css3

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

by Carlinhos • **533** points · Answer 1 · 2016-03-14T16:39:25+00:00

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.