Как сделать элемент списка такой же ширины, как и другие, в неупорядоченном списке?

Question

На моей странице есть неупорядоченный список, содержащий 4 элемента списка, представленные в моей демонстрации 4 зелеными прямоугольниками. В каждой строке должно быть не более 3 элементов списка (ящиков), но, поскольку в моей демонстрации есть 4 элемента списка, 4-й элемент переносится на новую строку. Это приводит к тому, что четвертый элемент расширяет всю ширину родительского контейнера.

Это происходит потому, что list_item_inner заполняет 100% ширины своего родителя (list_item), который, как предполагается, составляет 32% (как и другие), но он явно не того же размера, что зеленые поля над ним. Мне просто нужно, чтобы все элементы списка имели одинаковую ширину, независимо от того, есть ли в строке только 1 или нет.

Вот мой демонстрационный сайт

и вот HTML-код для элементов списка:

      <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>

Весь код CSS находится в HTML-документе. Любое решение? Спасибо!

Если уместно, страница использует FlexWrap webkit со скриптом:

<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>

Вот снимок экрана, показывающий, что элемент списка 4 не имеет такой же размер, как остальные.

Answer 1

Измените свойство CSS width на max-width:

.list__item {
    max-width: 32%;
}

Answer 2

Я не могу увидеть закрывающий тег. Так и должно быть:

<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>
    </figure>
</li>