4つの長方形のボックスをブートストラップ3の画面に合わせる方法は？

Question

私はブートストラップ3で複製しようとしている以下のようなデザイン（デスクトップ上）を持っています。デザインでは、4つのボックスが左右に間隔を置いて中央に配置されていますそのスペースを得るためには、余白を左と余白の間に置く必要があります）。ホバーでは、ボックスの背景色はすべて＃F4F4F4です。

この時点で、これは私がfiddleで行ったことです。その中で、col-lg-6クラスを使用しているので、すべてのボックス（バックエンド、フロントエンドなど）が画面サイズの50％をカバーしています

フィンドルでは、余白が残っていますマージン - しかし、いくつかの理由で私はそれを私のコンピュータ上で（マージン左とマージン右）見ることができません。私がウェブページを作るために使っているツールはブラケットです。

私はボックスの上にマウスを置いて左右にいくつかの間隔を置いてデザインを正確に中央に持っていくことができますか？また、他のBootstrapクラスを使用してそれを実行する必要がありますか？

私が使用していますCSSのコードは次のとおりです、私はわからない

#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

これは、あなたが探しているものです。..

COL-LGにCOL-LG-6を変更してみてください-5/col-lg-4を指定して、すべてのディビジョンの必要条件を満たしているかどうかを確認し、行の最初の項目にcol-lg-offset-1/col-lg-offset-2を追加します。