Sorin Dragomir Sorin Dragomir - 4 months ago 4
HTML Question

Horizontal unwanted scroll bar from CSS

I have no ideea where from I get this horizontal bar in the bottom. I tried overflow: hidden; but didn't work. I looked on the internet but most of people recomended the same line that I wrote above.

I am not an expert in css, html or bootstrap. I know a little from each one. Somehow I made a mistake in my code.

Please someone tell me what I did wrong in CSS, HTML or Bootstrap.

CSS:



body {
background-color: #EEEEEE;

}
ul, ul li {
margin: 0;
padding: 0;
list-style: none;
}
.top-red-hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border: 4px solid #8C1113;
}
.top-first-menu {
width: 100%;
display: table;

}
.top-first-menu .menu-right {
float: right;
padding: 20px 0 10px 0;
}
.top-second-menu {
background: #000000;
}
.top-second-menu .logo {
display: inline-block;
padding-left: 20px;
}
.top-second-menu .logo h1 {
color: #961915;
margin-bottom: 5px;
line-height: 0.8;
}
.top-second-menu .logo h1 span {
color: #FFFFFF;
}
.top-second-menu .logo p {
color: #FFFFFF;
}
.top-second-menu .top-red-buttons {
display: inline-block;
}
.top-second-menu .top-red-buttons button{
float: right;
margin-right: 10px;
}
.top-second-menu .language-menu {
display: inline-block;
}
.top-second-menu .top-red-buttons,
.top-second-menu .language-menu {
padding-top: 28px;
}
.consulter-form form,
.consulter-form h2{
background-color: #DFE3E4;
}
.consulter-form h2 {
width: 70%;
margin-bottom: 0px;
border: none;
}
.consulter-form form {
margin-top: 0px;
border-top: 1px solid #DFE3E4;
}
.vous-voulez-button {
background-color: #DFE3E4;

}
.trouver-hr {
width:100%;
height:5px;
display:block;
margin-top:50px;
background:#efefef;
border-top:1px solid #CCC;
border-bottom:1px solid #FFF;
}
.text-p, .vous-voulez {
margin-top: 40px;
}
.rubrique-promo {

}
.rubrique {

}
.boxes-details {
background-color: #FFFFFF;

}
.boxes-images {
margin-bottom: 40px;
}
.boxes-images img {
width: 100%;
}
.boxes-images h4 {
text-align: center;
background-color: #8C1211;
color: #FFFFFF;
padding: 10px 0px 10px 0px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
}
.boxes-images .details {
background-color: #D6D6D6;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}
.boxes-images .details-text {
color: #8C1211;
padding-top: 10px !important;
}
.boxes-images .details p {
padding: 0px 10px;
}
.boxes-images .details p:last-child {
padding-bottom: 10px;
}
.boxes-images .details p:nth-child(2) {
border-top: 2px solid #AAAAAA;
border-bottom: 2px solid #E5E0E0;
padding: 7px 10px;
}
.boxes-images .details p span{
float: right;
}
.bottom-hr-black {
margin-top: 100px;
margin-bottom: 0px;
}

footer {
margin-bottom: 50px;
}
.discount {
text-align: center;
background: #D6D6D6;
}
.discount p {
line-height: 1.5;

}
.first-p-bottom {
margin-top: 10px;
}
.bottom-black-hr {
display: block;
width: 100%;
margin-top: 100px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
border-style: inset;
border: 4px solid #444444;
}
.footer-lists {
background-color: #444444;
color: #FFFFFF;
}
.list-links h4 {
border-bottom: 2px solid #FFFFFF;
text-align: left;
}

.list-links ul li {
border-bottom: 1px solid #FAFBF9;
color: #FAFBF9;
}
.list-links ul li a {
color: #FAFBF9;
text-decoration: none;
}
.copyright {
text-align: center;
margin: 30px 0px 10px 0px;
}





HTML:



<!DOCTYPE>
<html>
<head>
<title>CLICK COOL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<header>
<div class="container-fluid">
<div class="top-first-menu">
<div class="btn-group menu-right">
<button type="button" class="btn btn-default active btn-lg">Espace clients</button>
<button type="button" class="btn btn-default active btn-lg">Promotions - Fin de series</button>
<button type="button" class="btn btn-default active btn-lg">Devenir partenaire</button>
</div>
</div><!-- end top-first-menu -->
<div class="top-second-menu container-fluid">
<div class="row">
<div class="logo col-md-5">
<h1>CLICK<span>COOL</span></h1>
<p>Le site ideal pour promouvoir vos activites</p>
</div><!-- end logo -->
<div class="top-red-buttons col-md-6">
<button type="button" class="btn btn-danger">TARIF - SERVICES</button>
<button type="button" class="btn btn-danger">CLICK CORPORATE</button>
<button type="button" class="btn btn-danger">STANDARD SVI</button>
</div><!-- end top-red-buttons -->
<div class="language-menu col-md-1">
<div class="form-group">
<!-- <label for="sel1">Select list:</label> -->
<select class="form-control" id="sel1">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
</div><!-- end language-menu -->

</div>
</div><!-- end top-second-menu -->
<hr class="top-red-hr">
</div><!-- end container-fluid -->
</header>

<main class="container-fluid">
<div class="home-top-selects">
<div class="row">
<div class="consulter-form col-sm-6">
<h2>Consulter les petites annonces</h2>
<form>
<div class="row">
<div class="col-sm-8">
<h4>Par mot-cle les petites annonces</h4>
</div>
</div>

<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-4">
<select class="form-control" id="sel1">
<option>Toutes categories</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>

<div class="row">
<div class="col-sm-3">
<h4>Ou?</h4>
</div>
</div>

<div class="row">
<div class="col-sm-3">
<select class="form-control" id="select-flags">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
<div class="col-sm-5">
<select class="form-control" id="another-select">
<option>toutes les villes select</option>
</select>
</div>
<div class="col-sm-4 text-right">
<button class="btn btn-primary btn-block" type="submit">
Lancez Votre Recherche
</button>
</div>
</div>

<h5 class="text-info text-center">
Faite une recherche dans votre perimetre grace a votre geolocalisation.
</h4>
</form>
</div>

<div class="consulter-form col-sm-6">
<h2>Trouver Une Enterprise</h2>
<form>
<div class="row">
<div class="col-sm-6">
<h4>Par mot-cle ou nom d'enterprise</h4>
</div>

<div class="col-sm-3">
<h4>Ou?</h4>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" id="usr-2" />
</div>

<div class="col-sm-3">
<select class="form-control" id="another-select-2">
<option>Toutes les villes select</option>
</select>
</div>

<div class="col-sm-3">
<select class="form-control" id="select-flags-2">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
</div>

<!-- Place this to fill the blank space -->
<div class="row">
<div class="col-sm-12">
<h4>&#160;</h4>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<select class="form-control" id="different-select">
<option>Autres options de recherche</option>
</select>
</div>

<div class="col-sm-offset-3 col-sm-3">
<button class="btn btn-primary btn-block" type="submit">
Chercher
</button>
</div>
</div>

<div class="trouver-hr"></div>

<div class="text-center">
<h3 class="text-info">
Votre enterprise n'est pas referencee?
</h3>
<button class="btn btn-large btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> AJOUTER MON ENTERPRISE
</button>
</div>
</form>
</div>
</div>
</div>

<div class="vous-voulez ">
<div class="row">
<div class="consulter-form col-sm-6">
<h4>Vous voulez vendre votre bien rapidement?</h4>
<button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>
</div>
<div class="consulter-form col-sm-6">
<h4>Recherche par numero de telephone</h4>
<form>
<div class="row">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">CHERCHER</button>
</div>
</div>
</form>
</div>
</div>
</div>

<div class="text-p">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a>
</div>
</div>
</div>
</div>
</div>

<div class="text-p">
<div class="row">
<div class="col-sm-1">
<img src="#"><p>PUB</p>
</div>
<div class="col-sm-11">
<div class="row">
<img src="images/Calque-6e.png">
</div>
</div>
</div>
</div>

<div class="text-p">
<div class="row">
<div class="col-sm-5 text-center">
<button type="button" class="btn btn-default active">Toutes les petites announces</button>
</div>
<div class="col-sm-7 text-right">
<p>Petites announces gratuites aujourd'hui avec plus de 10'000 announces</p>
</div>
</div>
</div>

<div class="text-p text-center">
<div class="row">
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Automobilies &amp; Accesories</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Immobiliers &amp; Prestige</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Emploi &amp; Carrieres</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Hotel &amp; Restaurant</button>
</div>
</div>
</div>

<div class="text-p rubrique-promo">
<div class="row">
<div class="col-sm-4 rubrique">
<h3>Rubrique</h3>
<ul>
<li>ANIMAUX &amp; ACCESSOIRES </li>
<li>ART &amp; ANTIQUITES</li>
<li>AUTOMOBILES</li>
<li>BIJOUTERIE</li>
<li>BRICOLAGES &amp; JARDINAGE</li>
<li>COLLECTIONS</li>
<li>EMPLOI</li>
<li>ENFANTS</li>
<li>ENFANTS &amp; BEBE</li>
<li>IMMOBILIER</li>
</ul>
</div>
<div class="col-sm-7">
<img src="images/promo.jpg">
</div>
</div>
</div>

<div class="text-p boxes-details">
<div class="row">
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div col-sm-12>
<div class="bottom-black-hr">
</div>
</div>



<div class="discount">
<div class="row">
<div class="col-sm-12 footer-p">
<p class="first-p-bottom">Le depot d'annonces, inclus 10 photos et 5 videos.</p>
<p>4 devises proposees: CHF, EURO, USD, GBP / Pour vendre, acheter, fournir vos presentations</p>
</div>
</div>
</div>
</main>
<footer class="footer-lists container-fluid">
<div class="row">
<div class="col-sm-3 list-links">
<h4>A propos</h4>
<ul>
<li><a href="#" title="#">Qui somme nous</a></li>
<li><a href="#" title="#">Relations investisseurs</a></li>
<li><a href="#" title="#">Clickcool pour particuliers</a></li>
<li><a href="#" title="#">Clickcool pour professionnels</a></li>
</ul>
</div>
<div class="col-sm-3 list-links">
<h4>Utilitaries</h4>
<ul>
<li><a href="#" title="#">FAQ</a></li>
<li><a href="#" title="#">Partners links</a></li>
<li><a href="#" title="#">Regles de diffusion</a></li>
<li><a href="#" title="#">Infos legales et CGU</a></li>
</ul>
</div>
<div class="col-sm-3 list-links">
<h4>Liens utile</h4>
<ul>
<li><a href="#" title="#">Tarifs</a></li>
<li><a href="#" title="#">Concept</a></li>
<li><a href="#" title="#">Publicite</a></li>
<li><a href="#" title="#">Formulaire de contact</a></li>
</ul>
</div>
<div class="col-sm-3 list-links">
<img src="images/Calque-52-text.png">
</div>
</div>
<div class="row">
<div class="col-sm-12 copyright">
<p>Copyright &copy; 2015-106. Tous droits reserves</p>
</div>
</div>
</footer>
</body>
</html>




Answer

add overflow:hidden to body, it works

body {
    overflow-x: hidden;
}

.row classes will have margin-left, margin-right has -15px, so it will cause the scroll bar. You better to wrap .row elements in .container class or you need to wrap .row elememts with another parent element which should have padding of 15px