My <ul> element is outside the container

Question

Currently I'm making a list with images in it. It works almost, but I have one problem. My list is not placed in the container while it should be. Here's a bit of the code.

<div class="container">
<ul>
<li>
<div class="person1test">
  <div class="personOverlay">
  <div class="info"><span class="naam"> text </span>
  <span class="functie"> text </span></div>
 </div>
 </div></li>
<li>
<div class="person1test">
 <div class="personOverlay">
  <div class="info"><span class="naam">text </span>
   <span class="functie"> text </span></div>
  </div>
  </div></li>
<li>
<div class="person1test">
 <div class="personOverlay">
  <div class="info">
   <span class="naam"> text </span>
   <span class="functie">text</span></div>
</div>
</div></li>

</ul>
     <div class="clearer"></div>
 </div>

Now this is the html, you can see the "clearer"-class which I used because I floated the list elements. Here's the css.

.container{
height: 350px;
}

.container ul{
width: 130%;
overflow: hidden;
list-style-position: inside;
}

.container ul li{
float: left;
list-style: none;
}

I hope I made it clear what my problems are because English is not my main language.

Answer 1

Error: This css

.container ul{
  width: 130%;
  overflow: hidden;
  list-style-position: inside;
}

Will set the width of the ul to 130% of the container width. And that means if the container is 100px the ul will be 130px and obvously moving out of the container. Make the ul width to be 100% , But if the ul has some padding left or margin left set (lets say 10px) on it then since it has to be 100px wide it will go beyond the container making it look like total of 110px.

Solution: So set the width to 100% and remove and padding or margin on it Or keep the margins and padding and make width to some 90% or something which will get your UI fixed.