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">© 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:
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;"> © XREF 2020</p>
</div>
</div>
</div>
</div>
body
tiene unmargin
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