Bootstrap column grid: Margin issues

Question

While splitting my page.aspx in 4 columns, I notice in the first and fourth columns several blank spaces (on the left and right side, respectively), thus narrowing the width of the second and third columns.

Knowing a way to get rid of such default margin issues within the first and fourth columns so as to get proper equally-balanced columns over the whole page.aspx would highly be appreciated.

To better illustrate such issue, I've written the following code:

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-3" style="font-size:16px">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
  </div>
</div>

Answer 1

That's because of the container you're using, the one you want is container-fluid which has no margin no padding, no nothing haha.

container gives each div a specified fixed width, that is the reason behind the blank spaces

You can check the documentation here: documentation