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

Question

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

Navigation

#1 by (0 votes)

1

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

Theheader(logobar,navigationandmainimage)issmallerthanthesite'scontainer,I'musingBootstrap.TheCSSwiththemeasureslookslikethis:

    @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><scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

I do not know how to sort, so the header has the same width as the rest of the layout.

PS: the edges and darker background is for better viewing of mine as to margin and padding. I'm using html5, css3 and bootstrap.

html html5 css css3 twitter-bootstrap

asked by anonymous 14.03.2016 / 14:04

1 answer

WHERE Clause Inner Join [closed] Pass data by link - php application

score 0 · Accepted Answer

To solve your problem I've added a div with class="row" around the header. Staying like this:

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

I did this because I noticed that the divs below this were within a row, but the header was not. In this link you can see how it was: link

Note: If you do not want the margins you can remove the class row from all the divs and create something your custom.