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