ul with images doesn't center properly - html

Question

I have a <ul> with images that I want to be displayed horizontally centred, inline but it keeps floating a little to the right and gets my window size to be a little over 100% width. Here's a FIDDLE, you might need to scroll out a little to see it.
Here's the 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>
and here the 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;
}
No matter where I add margin or padding or whatever, it doesn't move and fit.
I'm using bootstrap 3.
Can someone assist?

Answer 1

The spilling out over 100% of the page is due to the negative margins on .row - and this is important to how bootstrap's nested grid works. Wrapping the whole thing in a .container will correct this for you (it adds padding to the outside to negate the negative margins).
As for the ul being off-center, just do a simple reset on it and its nested lis before you start adding:
http://jsfiddle.net/8b6trqgj/4/

Answer 2

I solved by removing left padding to the ul and adding the same rule as #Brian:
#menuimages ul {
padding-left: 0;
}
.graybackground {
background: rgba(0,0,0,0.15);
padding: 50px;
margin:0;
max-width: 100%;
}
Fiddle

Answer 3

Just add
max-width: 100%;
margin: 0;
to .graybackground
Fiddle