Aligning the bootstrap column

Question

How to give equal spaces on all sides for below image? The leftside of margin is lesser than the rightside and the bottom spaces are more. So, without manually changing the column with offset values, is there another possibility?

.row{
    margin-top: 150px;
    margin-left: 30px;
}

#one{

    background-color:lavender; 
    width:330px; 
    height:250px; 
    border: 1px solid black;
}

#two{
    background-color:lavenderblush; 
    width:330px; 
    height:250px; 
    border: 1px solid black;
}

#three{
    background-color:lavender; 
    width:330px; 
    height:250px; 
    border: 1px solid black;
}

<div class="container-fluid">
  

    <div class="row">

  <div class="col-md-4 ">
     <div class="col-md-12" id="one" >
        Some Content.. 
     </div>
  </div>
  <div class="col-md-4 ">
     <div class="col-md-12" id="two">
        Some Second Content.. 
     </div>
  </div>
  <div class="col-md-4">
     <div class="col-md-12" id="three">
        Some Second Content.. 
     </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
     <div class="col-md-12" id="one" >
        Some Content.. 
     </div>
  </div>
  <div class="col-md-4">
     <div class="col-md-12" id="two">
        Some Second Content.. 
     </div>
  </div>
  <div class="col-md-4">
     <div class="col-md-12" id="three">
        Some Second Content.. 
     </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
     <div class="col-md-12" id="one" >
        Some Content.. 
     </div>
  </div>
  <div class="col-md-4">
     <div class="col-md-12" id="two">
        Some Second Content.. 
     </div>
  </div>
  <div class="col-md-4">
     <div class="col-md-12" id="three">
        Some Second Content.. 
     </div>
  </div>
</div>
    
  </div>

Answer 1

In most cases you shouldn't change the left/right margin on the .row because it's essential to how the Bootstrap grid works. Also col-* shouldn't be contained directly in another col-*.

.row{
    margin-top: 150px;
}

Just use a centered div inside the columns..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div id="one" class="center-block">
                Some Content..
            </div>
        </div>
        <div class="col-md-4 ">
            <div id="two" class="center-block">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-4">
            <div id="three" class="center-block">
                Some Second Content..
            </div>
        </div>
    </div>
</div>

Demo on Codeply

Answer 2

This might help you Codepen link

Do this for all of them.

<div class="row">
  <div class="col-md-4 ">
    <div id="one" >
      Some Content.. 
    </div>
  </div>
  <div class="col-md-4 ">
    <div id="two">
      Some Second Content.. 
    </div>
  </div>
  <div class="col-md-4">
    <div id="three">
      Some Second Content.. 
    </div>
  </div>
</div>

CSS:

#three{
  background-color:lavender; 
  width:100%; 
  height:250px; 
  border: 1px solid black;
  margin: auto;
}