CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Luis Benitez
Luis Benitez

Reputation: 3

Extra margin right in bootstrap responsive website

I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:

I have been checking my code and I can't find it :( Someone can help?

I'm cooding in just html and css, I know that 

body{
  background: black;
}
section.home{
  margin-top: 0;
  background: url(../img/bg-01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}
.pull-left{
}
.ingresar-bg{
  background-color: gray;
}
.ingresar{
  margin: 50px 60px;
  border: solid 1px white;
  color: white;
  background-color: rgba(0,0,0,0);
  padding: 10px;
  display: inline-block;
}

.ingresar:hover, .ingresar:active, .ingresar:visited{
  background-color: gray;
  color: white;
  border: solid 1px white;
}
input.form-control{
  margin-bottom: 15px;
}
.logo-modal{
  margin-left: auto;
  margin-right: auto;
}

.img-svg-logo{
  margin: 35px 50px;
  color: rgb(255, 255, 255);
  width: 200px;
  position: fixed;
}
@media (max-width:640px) {
  .img-svg-logo{
    width: 150px;
  }
  .ingresar{
    font-size: 15px;
  }
}
.cover-text {
    text-align: center;
    color: white;
    vertical-align: middle;
    font-size: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 110px;
}
.input-lg{
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  margin-bottom: 100px;
}
input[placeholder].position{
  text-align: center;
  background-position: left center;
  padding-left: 5px;

  background-image: url(../img/ubicacion1.svg);
  background-repeat: no-repeat;
}
.servicio-button{
  background: #2260ad;
  font-size: 25px;
  border: solid 1px #2260ad;
  border-radius: 0px;
  width: 300px;
  margin-bottom: 100px;
  margin-top: 100px;
}
.servicio-button:hover{
  background-color: #194984;
  border: solid 1px #194984;
}

.modal-content {
  position: relative;
  background-color: gray;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
  background-color: black;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.iconos{
  color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="assets/img/favicon.png" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Garage tu taller a domicilio</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/normalize.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section class="home">
      <div="container">
        <div class="nav">
          <div class="row">

            <div class="col-lg-6 pull-left">
              <a href="index.html">
              <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
              </a>
            </div>
            <div class="pull-right">
              <button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
              </div>
          </div>
            <!-- Modal -->
                  <form class="modal fade" id="ingresar">

                      <div class="modal-dialog modal-lg">

                          <div class="modal-content">

                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>

                                  <img src="assets/img/logo-grande-color.svg" class="center-block" />
                              </div>

                              <div class="modal-body">

                                  <div class="form-group">
                                    <div class="row">
                                      <div class="col-xs-12">

                                    <input type="text" placeholder="Usuario" class="form-control">
                                      </div>

                                      </div>
                                      <div class="row">
                                        <div class="col-xs-12">
                                      <input type="text" placeholder="Contraseña" class="form-control">
                                        </div>

                                        </div>




                                  </div>


                              </div>

                              <div class="modal-footer">
                                <div class="form-group">
                                  <button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
                                  <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>

                              </div>
                            </div>
                            </div>
                          </div>




                  </form>

        </div>
        <div class="cover-text row">
          <div class="col-sm-12">
            <p class="lead">
              Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
            </p>
          </div>
        </div>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <form>
                  <input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
                </form>
            </div>

            </div>
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
                </div>

        </div>

<!--
    </section>
    <section class="function">
      <div class="cover-text" id="function">
          <h1>¿Cómo funciona?</h1>
          <p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
      </div>
      <div class="row iconos block-center" id="iconos">
        <div class="col-md-4">
          <img src="assets/img/ubicacion-img.png" class="img-responsive color" />
        </div>
        <div class="col-md-4">
          <img src="assets/img/servicios-img.png" class="img-responsive color" />
        </div>
        <div class="col-md-4">
          <img src="assets/img/agenda-img.png" class="img-responsive color" />
        </div>
      </div>
    </section>

-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 0

Views: 3064

Answers (2)

GuruKay
GuruKay

Reputation: 3623

I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.

.container = always leaves a wide padding on both sides of the page.

.container-fluid = leaves a small padding.

.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.

So putting this together

<div class="container-fluid">
   <div class="row">This container will stretch from one side of the page to the order</div>

   <div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>

</div>

Upvotes: 0

Dino
Dino

Reputation: 806

Try this code. Edited and alligned some code.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->

<!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/normalize.css" rel="stylesheet">

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<section class="home"> 
<div "container">
  <div class="nav">
    <div class="row">
      <div class="col-lg-6 pull-left"> <a href="index.html"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </a> </div>
      <div class="pull-right">
        <button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
      </div>
    </div>
  </div>
  <div class="cover-text row">
    <div class="col-sm-12">
      <p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <form>
        <input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
  </div>
</div>
</section>


<!-- Modal -->
<form class="modal fade" id="ingresar">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="row">
            <div class="col-xs-12">
              <input type="text" placeholder="Usuario" class="form-control">
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <input type="text" placeholder="Contraseña" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="form-group">
          <button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
          <button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
        </div>
      </div>
    </div>
  </div>
</form>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

Additional CSS

.row {
    margin-right: auto;
    margin-left: auto;
}

Actually it is the problem with bootstrap row class. Check this code . It works

Working example http://www.bootply.com/coISbk1PgQ

Upvotes: 2

Related Questions