How to center/add margins to bootstraps grid?

I got a PSD design where the grid looks like this - Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)

I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.

My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?

I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.

My HTML file contains of a standard fluid grid

<div class="container-fluid>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
</div>

Solution

Add the following to your css

.row{padding: 0 120px;}