html - Bootstrap/CSS Div Messing up CSS -

so have class on own works fine, put in bootstrap row messes up.

when out side of bootstrap on own shows fine

html:

<div class="row"> <div class="col-lg-9">     <center>         <div id="output0" class="output">--</div>         <div id="output1" class="output">--</div>         <div id="output2" class="output">--</div>         <div id="output3" class="output">--</div>         <div id="output4" class="output">--</div>         <div id="output5" class="output">--</div>     </center> </div> 

css:

.output {     margin: 20px;     padding: 20px;     background: gray;     border-radius: 10px;     font-size: 80px;     width: 80px;     color: white;     display: inline-block; } 

you can so:

.output {      margin: 20px;      padding: 20px;      background: gray;      border-radius: 10px;      font-size: 80px;      width: 80px;      color: white;          display: inline-table;  }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">   <div class="row">  <div class="col-lg-9">      <center>          <div id="output0" class="output">0</div>          <div id="output1" class="output">1</div>          <div id="output2" class="output">2</div>          <div id="output3" class="output">50</div>          <div id="output4" class="output">100</div>          <div id="output5" class="output">1000</div>      </center>  </div>  </div>

i hope help.