Responsive Columns in Footer

Permalink
I'm converting my site into C5 and I'd like to maintain the responsive columns I have in my footer.

Currently I'm just using the autonav feature and have added my own template in the blocks/autonav/templates/ directory.

The autonav doesn't quite look right in the footer though...

What is the best way to go I about this? I must point out I'm a super newbie with some HTML & CSS but zilch PHP.

Will I need to create a custom block?

Thanks in advance!!!

<div id="content">
    <h5>Site Map</h5> 
     <div class="columns">
         <ul>
            <li>Home</li>
            <li>Facilities</li>
            <li>Calendar</li>
            <li>Event Booking</li>
            <li>Gallery</li>
            <li>Location</li>
            <li>History</li>
            <li>Links</li>
            <li>Contact</li>
            <li>Feedback</li>
            <li>Terms & Conditions</li>


#content        
{   
    background-color:#CCC;
    font-size: .75em; /* 12/16 */
    text-align: left; 
    margin-top: 20px;
    padding: 3.27251308901%; /* 25/1140 */
}
/*CSS3 multiple columns.*/
/* Get em size for colums: 184/16 */   
.columns
{    
    padding-left: 110px;
    -moz-column-width: 14.5em; /* Firefox */
    -webkit-column-width: 14.5em; /* webkit, Safari, Chrome */

designclash1