CSS responsive list items in a horizontal form

Question

I have a "Featured" row on my website, which consists of 3 equal elements in a horizontal format. I am trying to make the web page responsive by incorporating percentage widths but when I resize the widnow to less than the list width, the items move below each other.

Demo

I have tried adding a max-width, and messing around with certain widths being auto and 100%, but still no luck.

I may even be going about the code in the wrong manner as I have list items within an anchor to make the whole item a clickable link.

Here is part of my code, the rest is on the fiddle:

CSS:

.FeatureRow {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.FeatureRow li {
    float: left;
    width: auto;
    margin: 10px;
    background-image:    -moz-linear-gradient(top, #fbfbfb, #ffffff);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #ffffff);
    background-image:      -o-linear-gradient(top, #fbfbfb, #ffffff);
    background-image:         linear-gradient(to bottom, #fbfbfb, #ffffff);
    background-repeat: repeat-x;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.FeatureRow a {
    padding: 10px;
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
            border-radius: 5px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 4px 8px #f5f5f5;
       -moz-box-shadow: 0px 4px 8px #f5f5f5;
            box-shadow: 0px 4px 8px #f5f5f5;
    background-color: transparent;
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
       -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
         -o-transition: all 500ms ease-in-out;
}

HTML:

<ul class="FeatureRow">
<li>
    <a href="/contact/">
        <h2 class="SpeechBg">Need some help?</h2>
        <p>Feel free to get in contact with us</p>
    </a>
</li>
<li>
    <a href="/property/">
        <h2 class="BinocularsBg">Country or City?</h2>
        <p>You can always find a place, no mater where it is!</p>
    </a>
</li>
<li>
    <a href="/property/">
        <h2 class="CameraBg">Now that's scenary!</h2>
        <p>We guarantee than you will love the views from all of our unique locations</p>
    </a>
</li>
</ul>

Answer 1

Adding this helps.

.FeatureRow li{
    width: 30%;
    display: inline-block;
}

Although, for really small width screens, it is usually preferred to have them stacked vertically.

Answer 2

You have to use the @media selector in your css.

Take a look at this fiddle

I added the following CSS3 to make sure the blocks slide underneath each other.

@media(max-width: 880px) {
    .FeatureRow li {
        width: 100%;
    }
}
.FeatureRow a {
    max-width: 100%'

    }
}