Why do my boxes keep expanding when my text gets longer?

Question

I am having a problem with my code, I want the boxes too all line up and look equal, however when I add text in the boxes gets bigger. What I want is all the boxes too be equal in size.

Here is my code: http://jsfiddle.net/9p40xeLe/1/

What my problem looks like:

Well, I believe that, there is something wrong with the Margins, however I can't still figure it out after playing around with the numbers, etc. Any ideas why the boxes are not equal in size?

CSS:

ul.rig {
list-style: none;
font-size: 0px;
margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
width: 22.5%; /* this value + 2.5 should = 25% */
}

@media (max-width: 480px) {
ul.grid-nav li {
    display: block;
    margin: 0 0 5px;
}
ul.grid-nav li a {
    display: block;
}
ul.rig {
    margin-left: 0;
}
ul.rig li {
    width: 100% !important; /* over-ride all li styles */
    margin: 0 0 20px;
}
}

HTML:

    <ul class="rig">
    <li>
    <img src="images/pri_001.jpg" />
    <h3>Espresso</h3>
    <center>
    <p>Espresso is an entire approach to coffee cuisine.<br>
    It is a unique dark roast, finely ground brewing method that produces an              intense coffee experience.  <br>
    This distinctive espresso blend of Indonesian & South America coffees    are roasted in a unique Mediterranean style.
    </p></center>
</li>

<li>
    <img src="images/pri_002.jpg" />
    <h3>Espresso Decaf</h3>
    <center>
    <p>A Mediterranean style Espresso blend of African & South American      coffees. <br>
    It has all the taste & body of Espresso w/ none of the jitters.
    </p>
    <center>
</li>

<li>
    <img src="images/pri_003.jpg" />
    <h3>Italian Roast</h3>
    <p>Our darkest roast, w/ beans that are ebony black. <br>
    This roast offers a big coffee flavor for people who like a strong coffee taste from each sip. <br>
    From the moment you open the bag you will notice an incredible, mouth watering aroma.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>French Roast</h3>
    <p>French is our medium dark roast, w/ a dark mahogany color. <br>
    A blend of sumatran mandeling, panamanian, mexican, & colombian coffees. <br>
    This is the coffee for the true connoisseur.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Europa Blend</h3>
    <p>An extravagant, full-bodied blend w/ a rich fragrant aroma. <br>
    This medium dark roast coffee will excite your senses. <br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Vienna Roast</h3>
    <p>A medium roast lighter than French or Italian. <br>
    This blend of Colombian Supremo, Panama & Brazilian coffee is characterized by caramel undertones w/ a clean aftertaste. <br>
    This is the perfect roast for the coffee drinker who likes a full coffee flavor without being overpowered.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Fogbuster</h3>
    <p>A blend of Italian & Vienna roasts. A rich sweet flavored coffee w/ a beautiful bouquet. <br> 
    It retains it character even when sweetened w/ milk.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Gourment Blend</h3>
    <p>This is the blend that started it all & is still our most popular. <br>
    A blend of the finest Colombian, Central American & South American Coffees, <br>
    lightly roasted to enhance their natural nut & cocoa profiles.<br> </p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Premium Blend</h3>
    <p>A mellow, mild & light bodies coffee. 
    This blend of flavorful Arabica beans is great for any time of the day. </p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Colombian</h3>
    <p>Grown in the coffee capitol of the world,<br>
    these flavorful beans are lightly roasted to perfection to insure a great cup of coffee every time.<br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Colombian</h3>
    <p>Deliciously dark Italian roast w/ lots of flavor, & a smooth sweet aftertaste.<br>
    A coffee house favorite. <br></p>
</li>

<li>
    <img src="images/pri_004.jpg" />
    <h3>Costa Rican</h3>
    <p>Lightly roasted beans grown on the Kona coast of Hawaii are blended w/ select arabicas to produce a smooth, <br>
    mild coffee taste. <br></p>
</li>






</li>

</ul>

    </div>

Answer 1

you have to set display property to block

 ul.rig li { display: block; }

Answer 2

This is the reason:

ul.rig li {
  display: inline-block;

You have made the items inline blocks. If you remove this style, they will be blocks (which is the default for li elements), and occupy the full available width.

Updated Fiddle

By the way, I saw you also use the center tag. This tag is old, generally considered bad practice (styling should be done in, not in the markup), and in HTML5 this element is officially removed. Use text-align: center in your CSS to center text.

Answer 3

Change inline-block for your li to block (or remove it since the browser defaults to block)

ul.rig li {
display: block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}