How to make 4 rectangle boxes fit to the screen in bootstrap 3?

Question

I have a design(its on desktop view) as shown below which I am trying to replicate in Bootstrap 3.In the design, the 4 boxes are placed at the center with some spacing on left and right (I am assuming I have to put margin-left and margin-right in my CSS to get that spacing). On hover, every box background color is #F4F4F4.

At this moment, this is what I have made on fiddle. In it, every box(eg: back-end, front-end, etc) is covering 50% of the screen size as I am using col-lg-6 class

In the fiddle, I can see margin-left and margin-right but for some reasons I can't see it (margin-left and margin-right) on my computer. The tool which I am using to make a webpage is Brackets.

I am wondering, how I can bring the boxes at the center exactly in the design with some spacing at left and right with hover on boxes. Also, do I need to use other Bootstrap class to get it done ?

The CSS code which I am using is:

#front-end:hover {
    background-color: #F4F4F4;
}

#back-end:hover {
    background-color: #F4F4F4;
}

#graphics-designer:hover {
    background-color: #F4F4F4;
}

#sales:hover {
    background-color: #F4F4F4;
}

#back-end h3 {
    color: blue
}

#front-end h3 {
    color: blue
}

#graphics-designer h3 {
    color: blue
}

#sales h3 {
    color: blue
}

.job-openings #back-end {
    text-align: center;
}

.job-openings #front-end {
    text-align: center;
}

.job-openings #graphics-designer {
    text-align: center;
}

.job-openings #sales {
    text-align: center;
}

.job-openings h2 {
    text-align: center;
    padding-top: 50px;
    font-size: 2.8rem;
    color: #444444;
}

.job-openings .container {
    padding-top: 50px;
    padding-bottom: 50px;
}

Answer 1

I am not sure, is this what you are searching for..

try changing the col-lg-6 to col-lg-5 / col-lg-4 as per your requirement for all the divisions and then add the col-lg-offset-1 / col-lg-offset-2 for the first item in the row for space in the front.