Padding / Margin bootstrap

1

I am learning how to use bootstrap by making a page based on a model and I can not remove the margin to the left of the start button. I have tried many things changing the css (modifying margin, padding, etc) and I can not change it even if it seems silly: 3

This is the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3 col-md-offset-1">
      <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Inicio</a></li>
            <li><a href="miembros.html">¿Quiénes somos?</a></li>
            <li><a href="contacto.html">Contacto</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      <section class="container-fluid">
        hola
      </section>
    </div>
    <div class="col-md-2 hidden-xs hidden-sm visible-md-block visible-lg-block">
      <img class="img-responsive" src="img/logo/minilogo.jpg" title="logo" alt="logo" id="logo">
    </div>
  </div>
</body>
    
asked by Pablovg 31.03.2017 в 14:24
source

1 answer

1

Hello, just add style="padding-left: 0" to div.container to remove the space.

<div class="container" style="padding-left: 0;">

Greetings

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3 col-md-offset-1">
      <nav class="navbar navbar-default navbar-static-top">
        <div class="container" style="padding-left: 0;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Inicio</a></li>
            <li><a href="miembros.html">¿Quiénes somos?</a></li>
            <li><a href="contacto.html">Contacto</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      <section class="container-fluid">
        hola
      </section>
    </div>
    <div class="col-md-2 hidden-xs hidden-sm visible-md-block visible-lg-block">
      <img class="img-responsive" src="img/logo/minilogo.jpg" title="logo" alt="logo" id="logo">
    </div>
  </div>
</body>
    
answered by 31.03.2017 / 15:17
source