1

No sé porque tengo ese trozo de margen que por mas que ponga margin:0 y demás ni el nav ni la imagen no me ocupan toda la pagina. Si os fijáis tanto en la parte derecha como en la parte izquierda hay un pequeño margen en blanco el cual quiero que desaparezca y que la imagen me ocupe todo el width.

Prologo:
Espero que me podáis ayudar.Y también que stackoverflow me deje de decir que añada más detalles....La verdad es que no se que más poner para que me deje enviar la pregunta ya. Bueno también me dice que mi imagen lleva código fuente, cosa que no es verdad pero bueno..

.fondo {
  background-image: url('../img/image4.jpg');
  height: 100vh;
  background-position: center;
  background-size: cover;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  max-width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!--NavBar -->
<div class="container-fluid  bg-white fixed-top">
  <nav class="navbar navbar-expand-lg  bg-white container">
    <a class="navbar-brand" href="#">
      <img src="img/Icono.png" width="30" height="30" alt="">EasyLinks
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto text-white">
        <li class="nav-item active">
          <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Categorias</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contactanos</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-dark text-white my-2 my-sm-0" type="submit">Buscar</button>
      </form>
    </div>
  </nav>
  <!--NavBar -->

  <!-- Slide -->
  <div class="container-fluid fondo">
    <div class="container d-flex flex-column justify-content-center h-100 align-items-center">
      <h1>All is connected!</h1>
      <h6>Llega a cualquier sitio del mundo con unos sencillos clicks!</h6>
      <div>
        <a href="#" class="btn btn-dark">Navega</a>
      </div>
    </div>
  </div>
</div>

introducir la descripción de la imagen aquí

9
  • 1
    Con el código que has subido parece que si que llega hasta el final. ¿Podrías intentar reproducir el error en tu pregunta? De esta manera será mucho más fácil ayudarte. Commented el 16 nov. 2019 a las 15:47
  • 1
    No ves un cierto margen o no sé exactamente que es entre el menú del Opera y la imagen de fondo. Pues que quiero que la imagen me ocupe ese poquito mas. A lo mejor no me estoy explicando muy bien. Commented el 16 nov. 2019 a las 15:50
  • 1
    Si, en la imagen se ve perfectamente. Lo que me refiero es que en el ejemplo de código que has puesto en tu pregunta no se está produciendo ese espacio entonces va a ser difícil ayudarte si no lo podemos reproducir :/ Commented el 16 nov. 2019 a las 15:54
  • 1
    No entiendo lo que me quieres decir, lo de ejecutar? Lo estoy haciendo con bootstrap. Lo siento por no entender lo que me estas tratando de decir.. :c Commented el 16 nov. 2019 a las 15:58
  • 1
    Sí, si le das al botón ejecutar del código, se ve como el navbar y el fondo llegan hasta el final. Lo que te quiero decir es que no parece que se esté reproduciendo el error con el código que has puesto en tu pregunta, ya que el efecto no es el mismo así que sospecho que es algo de bootstrap. Commented el 16 nov. 2019 a las 16:03

1 respuesta 1

5

El problema es que tienes un .container-fluid como padre de los elementos.

La estructura que deberías utilizar es:

<body>
  <nav>
    <!-- code here -->
  </nav>
  <header>
    <!-- code here -->
  </header>
  <section class="container-fluid">
    <!-- code here -->
  </section>
  <footer>
    <!-- code here -->
  </footer>
</body>

mi recomendación es que uses el .container o container-fluid cuando escribas contenido, no lo uses como un contenedor de muchos elementos a no ser que necesites el margen.

incluso lo mejor sería:

  <section class="foo-class">
    <div class="container-fluid">

    </div>
  </section>
1
  • 2
    Guau, perfecto muchas gracias!! Llevaba un buen rato probando cosas pero no pensé en eso. Gracias de verdad! Commented el 16 nov. 2019 a las 16:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.