html - Making 3 boxes centralized -

html - Making 3 boxes centralized -

i create 3 box css + html -> http://i.imgur.com/6ktauui.png

code:

<div class="row"> <div class=".col-md-6"> <div class="box">open bar + drinking games</div><span></span> <div class="box">conhecer vÁrios bares e baladas em uma das maiores cidades mundo</div><span></span> <div class="box">conhecer pessoas</div><span></span> </div> </div> #about .box { background-color: transparent; border: 1px solid white; width: 250px; height: 350px; display: inline-block; margin-top: 50px; margin-bottom: 50px; margin-right: 20px; }

i want know why middle box more others.

update:

know i'm using right grid system:

<div class="row"> <div class="col-md-4 box">open bar + drinking games</div> <div class="col-md-4 box">conhecer vÁrios bares e baladas em uma das maiores cidades mundo</div> <div class="col-md-4 box">conhecer pessoas</div> </div>

and

#about .box { background-color: transparent; border: 1px solid white; width: 250px; height: 350px; margin-top: 50px; margin-bottom: 50px; margin-right: 140px; }

but not centralized yet

-> http://i.imgur.com/mc99oxo.png

if have display: inline-block; boxes vertically aligned baseline. see http://quirksmode.org/css/css2/display.html#inlineblock farther information.

from code guess you're using bootstrap. utilize bootstraps grid:

<div class="row"> <div class="col-md-4 box">open bar + drinking games</div> <div class="col-md-4 box">conhecer vÁrios bares e baladas em uma das maiores cidades mundo</div> <div class="col-md-4 box">conhecer pessoas</div> </div> .box { background-color: transparent; border: 1px solid white; height: 350px; margin-top: 50px; margin-bottom: 50px; }

update:

wrap .row div 1 class "container" horziontally center it. read bootstrap docs farther information: http://getbootstrap.com/css/#grid

html css