How do I make a list item same width as others, within an unordered list?

Question

My page has an unordered list containing 4 list items, represented in my demo by 4 green boxes. There should be a maximum of 3 list items (boxes) per line, but since my demo has 4 list items, the 4th item is pushed to a new line. This causes the 4th item to expand the entire width of the parent container.

This happens because list_item_inner is filling 100% of the width of its parent (list_item), which is suppose to be 32% (like the others), but it's clearly not the same size as the green boxes above it. I simply need all list items to have the same width, regardless if there's only 1 on a line or not.

Here's my demo site

and here's the html code for the list items:

      <li class="list__item">
<figure class="list__item__inner">
<a class="divLink" href="http://google.com">
<p class="vignette" style="background-image:url(http://www.albertelli.com/photoarchive/Random_2001/house_medium.jpg)"></p>
<div class="titlebox">Test </div>
<div class="locationbox">Test</div>
        <div class="pricebox">Test</div>
     </a>
    </li>

All CSS code is within the html document. Any solution? Thank you!

If relevant, the page uses FlexWrap webkit, with the script:

<script>

;( function( $, window, document, undefined )
{
    'use strict';

    var s = document.body || document.documentElement, s = s.style;
    if( s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '' ) return true;

    var $list       = $( '.list' ),
        $items      = $list.find( '.list__item__inner' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

</script>

Here's a screenshot showing list item 4 not being the same size as the others.

Answer 1

Change the CSS width property to max-width:

.list__item {
    max-width: 32%;
}