I am trying to make my right container elements fill the entire width of their column. After inspecting in Chrome, I noticed that my bootstrap container had default margins on both sides. To fix this, I set the margins to zero.
Although the left margin disappeared as expected, the right margin still persists. Even though the inspector shows a zero margin, there is a visible orange space attached to the container.
You can see the issue in this screenshot
<div class="container-fluid">
<div class="bg-img">
<div>
<img class="logo" src="./images/logo.svg" alt="logo">
</div>
<div class="container">
<div class="row no-margin">
<div class="col-lg-8 left-col">
<img class="illu-img" src="./images/illustration-mockups.svg" alt="illustration-mockups">
</div>
<div class="col-lg-4 right-col">
<h1>Build The Community Your Fans Will Love</h1>
<h2>Huddle re-imagines the way we build communities. You have a voice, but so does your audience.
Create connections with your users as you engage in genuine discussion. </h2>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(257, 40%, 49%);
font-family: 'Poppins', sans-serif;
color: #fff;
overflow: hidden;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 1.2rem;
}
.bg-img {
height: 100vh;
background-image: url(./images/bg-desktop.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 4%;
}
.logo {
margin-bottom: 50px;
}
.container {
margin-left: 0;
margin-right: 0;
}
.illu-img {
width: 101%;
}