ul與圖像沒有正確居中

我有一個<ul>與圖像，我想要水平居中顯示，內聯，但它保持向右浮動一點，讓我的窗口大小有點超過100％的寬度。這裏有一個FIDDLE，你可能需要滾動一下才能看到它。ul與圖像沒有正確居中

這裏的UL：

<div class="row graybackground margin-top-60"> 
    <section id="menuimages" class="margin-top-60"> 

    <ul class="margin-top-60"> 
     <li class="col-md-4 col-sm-6"> 
      <div class="menubg" style="background-image: url({{ URL::asset('img/training/18911510_m.jpg'); }})"> 
       <span>{{ link_to('index/#training', 'TRAINING') }}</span> 
      </div> 
     </li> 
     <li class="col-md-4 col-sm-6"> 
      <div class="menubg" style="background-image: url({{ URL::asset('img/taste/20360155_m.jpg'); }})"> 
       <span>{{ link_to('index/#eat', 'TASTE') }}</span> 
      </div> 
     </li> 
     <li class="col-md-4 col-sm-6"> 
      <div class="menubg" style="background-image: url({{ URL::asset('img/relax/14824877_s.jpg'); }})"> 
       <span>{{ link_to('index/#relax', 'RELAX') }}</span></div> 
     </li> 
    </ul> 

    </section> 

</div>

這裏的CSS：

.graybackground { 
    background: rgba(0,0,0,0.15); 
    padding: 50px; 
} 
.margin-top-60 { 
    margin-top:60px; 
} 
.menubg a { 
    margin-top:20px; 
    margin-left: 20px; 
    display: inline-block; 
    font-size: 1.7em; 
    font-weight: bold; 
    color: #f5f5f5; 
    background: rgba(0,0,0,0.5); 
    border-radius: 5px; 
    padding:2px 4px; 

} 
.menubg a:hover { 
    text-decoration: none; 
}

無論我加保證金或填充或什麼的，它不會移動和合適的。

我正在使用引導程序3.

有人可以協助嗎？

來源

2014-12-04 baao

我通過移除左填充到UL並添加相同的規則來解決@布賴恩：

#menuimages ul { 
    padding-left: 0; 
} 

.graybackground { 
    background: rgba(0,0,0,0.15); 
    padding: 50px; 
    margin:0; 
    max-width: 100%; 
}

Fiddle

來源

2014-12-04 03:17:51 Skatox