I'm encountering an issue with adding a gutter between 2 columns on my website layout. I have a row that needs to be 1280px wide (based on a reference resolution of 1366x768 with padding of 43px on each side of the page), containing two sections that should be 620px wide each with a 40px gutter in between. The problem is that the columns end up being half of the view (640px), leaving no space for the gutter (even though I assumed it would be automatic). The default gutter has already been set to 20px on each side.
<div class="wrapper">
<div class="row">
<div class="col-lg-6 row a">
aaa
</div>
<div class="col-lg-6 row b">
aaa
</div>
</div>
</div>
.wrapper {
padding: 0 43px;
background: red;
height: 100vh;
}
.a {
background: blue;
margin: 0;
}
.b {
margin: 0;
background: green;
}