2

El no ocupa todo el ancho de la página ya que siempre queda con un margen a la izquierda.

En quité todos los márgenes y revisé todos los , pero de todos modos no logro quitar ese margen. Espero que me puedan ayudar. Muchas Gracias!!

Se ve de esta manera:

body{
   margin: 0%;
   padding: 0%;
   
   
}

#banner{
    padding-top: 50px;
    width: 100%;
}


a{
    color: black;
}

#nav-header{
    background-color: rgba(199, 210, 214, 0.692);

   
}

#navbar-toggler{
    
    background-color: rgba(206, 206, 206, 0.692);
    padding: 3px, 4px, 3px 4px;
    border: 1px solid rgb(151, 151, 151);    

}

#btn-menu{
    padding: 3px, 4px, 3px 4px;
    width: 30px;
    margin-top: 1px;
   
}

#logo-header{
    
    vertical-align: middle;
    width: 130px;
    margin-top: -10px;
}

img{
   
    background-position: center;
    background-size: cover;
    max-width: 100%;
   
    
}


.title{
    margin-top: 20px;
    text-align: center;
}

#home-card{
    text-align: start;
    margin-top: 50px;
    padding-left: 40px;
    
}

#line-home{
    background-color: rgba(3, 158, 197, 0.932);
}

.footerContainer{
    background-color: rgb(36, 39, 44);
    font-size: 16px;
    color: rgb(214, 214, 214);
    padding: 5px;
    width: 100vw;
    text-align: justify;
    justify-content: center;
    margin-top: 30px;
    position:absolute;
    left:-0%;
    
  
    

    
    
}

#line-footer{
    background-color: rgb(136, 136, 136);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>XREF</title>

    <!-- CSS de Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <!-- CSS Font Awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />

    <!-- CSS Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lato:400,700,300"
      rel="stylesheet"
      type="text/css"
    />

    <!-- CSS Propio -->
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <nav id="nav-header" class="navbar navbar-expand-lg fixed-top">
      <div class="container">
        <a id="logo-header" class="navbar-brand" href="index.html">
          <img src="img/Logo-PNG.png" alt="Logo xref" />
        </a>

        <button
          id="navbar-toggler"
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarLinks"
          aria-controls="navbarLinks"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span id="btn-menu" class="btn-block">
            <i class="fas fa-bars"></i>
          </span>
        </button>
        <div
          id="navbarLinks"
          class="collapse navbar-collapse justify-content-end"
        >
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="nosotros.html">Nosotros</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="servicios.html">Servicios</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contacto.html">Contacto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div id="banner">
      <img src="img/Banner.jpg" alt="Banner XREF" />
    </div>

    <div class="container">
      <div class="title">
        <h1>Bienvenido</h1>
      </div>

      <hr id="line-home" />

      <div id="home-card">
        <div class="row">
          <div class="col-md-4">
            <div class="card bg-light mb-3" style="max-width: 18rem">
              <div class="card-header">
                <h4>Nosotros</h4>
              </div>
              <div class="card-body">
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <button type="button" class="btn btn-info">Ver Más</button>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-light mb-3" style="max-width: 18rem">
              <div class="card-header">
                <h4>Servicios</h4>
              </div>
              <div class="card-body">
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <button type="button" class="btn btn-info">Ver Más</button>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-light mb-3" style="max-width: 18rem">
              <div class="card-header">
                <h4>Proyectos</h4>
              </div>
              <div class="card-body">
                <p class="card-text">
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <button type="button" class="btn btn-info">Ver Más</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer class="footerContainer ">
        <div class="row">
          <div class="col-md-3">
            <h6>XREF</h6>
          </div>
          <div class="col-md-3">
            <p>
              <i class="far fa-envelope-open"></i> [email protected]
            </p>
          </div>
          <div class="col-md-3">
            <p><i class="fab fa-whatsapp"></i> 098 436 244</p>
          </div>
          <div class="col-md-3">
            <p><i class="fab fa-linkedin"></i> Xref</p>
          </div>
        </div>
        <hr id="line-footer" />
        <div class="row">
          <div id="" class="col-md-3">
            <p style="color: #ddd">&copy; XREF 2020</p>
          </div>
        </div>
      </footer>
    </div>

    <!-- jQuery -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>

    <!-- JS de Popper.js -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>

    <!-- JS de Bootstrap -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>

    <!-- JS de Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- JS Propio -->
    <script src="js/app.js"></script>
  </body>
</html>

El <footer> no ocupa todo el ancho de la página ya que siempre queda con un margen a la izquierda.

En <body> quité todos los márgenes y revisé todos los <div>, pero de todos modos no logro quitar ese margen. Espero que me puedan ayudar. Muchas Gracias!!

Se ve de esta manera:

Screenshot de la página web

Y este es el código:

#footer{
    background-color: rgb(36, 39, 44);
    font-size: 16px;
    color: rgb(214, 214, 214);
    padding: 5px;
    width: 100vw;
    text-align: justify;
    justify-content: center;
    margin-top: 30px;
}

#line-footer{
    background-color: rgb(136, 136, 136);
}
<div id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <h6>XREF</h6>
      </div>
      <div class="col-md-3">
          <p><i class="far fa-envelope-open"></i> [email protected]</p>
       </div>
      <div class="col-md-3">
        <p><i class="fab fa-whatsapp"></i> 098 436 244</p>
      </div>
      <div class="col-md-3">
        <p><i class="fab fa-linkedin"></i> Xref</p>
      </div>
    </div>
    <hr id="line-footer">
    <div class="row">
      <div id="" class="col-md-3 ">
        <p style="color: #ddd;"> &copy; XREF 2020</p>
      </div>
    </div>
  </div>
</div>

8
  • 2
    Por favor lee Cómo preguntar y de paso checa el recorrido de bienvenida, considera editar y mostrar un ejemplo mínimo verificable desde el cual podamos reproducir el fallo y en concencuencia ayudar.
    – user128299
    Commented el 17 dic. 2020 a las 19:47
  • 1
    Por que no hay código HTML o CSS mostrado, entonces no podemos ver que pasa.
    – Excorpion
    Commented el 17 dic. 2020 a las 19:50
  • Bien no me habia dado cuenta, ahí lo agregue
    – user206022
    Commented el 17 dic. 2020 a las 20:36
  • @user206022 ahora explícame por que tu body tiene un margin de 8px ??? Además, no está todo el código, veo de inmediato que faltan divs y otros contenedores que no se ven en tu muestra
    – Excorpion
    Commented el 17 dic. 2020 a las 20:39
  • 1
    una cosa que pasa es que si esta dentro del contenedor aunque tome el 100% de la pantalla se ve obligado a tomar ese, debes sacarlo
    – DavElsanto
    Commented el 18 dic. 2020 a las 0:15

2 respuestas 2

4

Probablemente porque lo tienes dentro de un contenedor u otro elemento que limita su tamaño. Te muestro un ejemplo válido de cómo hacerlo sin el css extra que veo en tu código, utilizando Bootstrap:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <!-- Bootstrap 4.5 css -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
    </head>
    
    <body>
    
        <div class="container">
    
           tu código 
    
        </div><!--//container-->
    
        <footer class="fixed-bottom bg-secondary">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-3">
                  <h6>XREF</h6>
                </div><!--//col-->
                <div class="col-md-3">
                    <p><i class="far fa-envelope-open"></i> [email protected]</p>
                 </div><!--//col-->
                <div class="col-md-3">
                  <p><i class="fab fa-whatsapp"></i> 098 436 244</p>
                </div><!--//col-->
                <div class="col-md-3">
                  <p><i class="fab fa-linkedin"></i> Xref</p>
                </div><!--//col-->
              </div><!--//row-->
              <hr id="line-footer">
              <div class="row">
                <div id="" class="col-md-3 ">
                  <p style="color: #ddd;"> &copy; XREF 2020</p>
                </div><!--//col-->
              </div><!--//row-->
            </div><!--//container fluid-->
        </footer>
    
    </body>
    </html>

Como puedes ver, también sustituí el div con id footer por una etiqueta <footer> que es la forma correcta y purista de crear este elemento en html.

3
  • No entiendo estas respuestas que dicen "probablemente algo está mal" y como solución ofrecen un snippet de la documentación oficial que fácilmente se puede incluir en un comentario. He visto varias ya y parece que son aceptadas por la comunidad. Commented el 18 dic. 2020 a las 18:00
  • La respuesta que di no fue sacada de ningún sitio, el ejemplo que cito es el código en su pregunta modificado para que funcione y sea correcto, por ejemplo no se suele hacer un footer en un div ya que existe la etiqueta footer para eso. Commented el 18 dic. 2020 a las 18:06
  • Claro, con la edición se entiende mejor tu punto Commented el 18 dic. 2020 a las 22:44
0

Intente darle una posición absoluta y lo pones en left -0.5%.

Ejemplo:

position:absolute;
left:-0.5%;
3
  • De esta lo pude solucionar y queda reresponsive. Muchas gracias!
    – user206022
    Commented el 18 dic. 2020 a las 20:56
  • Si tienes razon.
    – DABL03
    Commented el 10 feb. 2021 a las 16:36
  • Y lograste tu objetivo.
    – DABL03
    Commented el 24 feb. 2021 a las 3:28

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.