How to pull horizontal scrollbar from my site?

0

/*-------Conf.CSS--------*/
body{
    background-color:#FFF;	
}

header{
	background-color:#222;
	width:100%;
	height:78px;
	float:left;
}

.logo{
    width:10.9375%;
	height:66px;
	float:left;
	margin-left:162px;
	margin-top:9px;
}

/*-------Menu--------*/

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 100%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}
<header>
   <div class="logo">
     <a href="index.html"><img src="img/logo.png" width="112" height="60" alt="Meu site" title="Meu site"/></a>
   </div>
</header>

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
        </ul>
    </div>
    
 </div> 

There is an error in the menu on my site that causes the site to have a horizontal scrollbar.

    
asked by anonymous 19.10.2015 / 15:55

2 answers

2

Actually, this is happening because you have a div with a width of 100%, and with a margin of 11% totaling 111%, put a div inside the div of the menu with the margin.     

19.10.2015 / 17:03
3

Try adding this to your CSS:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
    
19.10.2015 / 15:58