If you're looking to solve your issue, I recommend setting the width and height of all the boxes to your desired measurements.
Additionally, apply a max-width and max-height of 100% to the image. This will prevent it from overflowing the parent div [box] while maintaining the image's aspect ratio. (Using width and height could distort the ratio)
Update: Please note that padding:none; is not valid. Use padding:0; instead.
To summarize, make the following changes in your CSS:
#custom-list .custom-list-element
{
width: 50%;
height: 200px; /* adjust the height as needed */
float: left;
background-color: #333333;
text-align: center; /* ensures the image is always centered in the div */
position: relative;
}
#custom-list .custom-list-element img
{
max-width: 100%; /* prevents overflow of width */
max-height: 100%; /* prevents overflow of height */
}
#custom-list .custom-list-element article p
{
padding: 0; /* valid value */
}
#custom-list .custom-list-element article h1
{
color: #fff;
padding: 0; /* valid value */
font-size: 1.5em;
}
Lastly, because I enjoy using Fiddles, here is a link to one: http://jsfiddle.net/avrahamcool/tjwHk/1/