Last column drops down when browser window is shrunk

I’m using the responsive full-width page layout of Nexus theme. On one page I’ve put a four-column fluid width layout. When I horizontally shrink my Firefox browser window past a certain point, the last of the four columns drops down below the previous three, whilst they all continue to shrink horizontally – and the first three columns behave as they should, with no more columns dropping down as the browser window gets thinner. How can I stop that fourth column from dropping down beneath the first three?
Thank you!

Web page:
http://morningsidekick.com/1-daily-prep/prepblog/home/

It will ask for a login – user name and password are both: octfree

Here’s my CSS:

#four-column-content{
width: auto%;
margin:5% auto;
padding:1%;
background-color:#87CEEB;
border:5px solid #FFFFFF;
}
#four-column-col_1{
width:22%;
float:left;
margin-right:1%;
padding:1%;
background-color:#FFFFFF;
border: 1px solid #959595;
}
#four-column-col_2{
width:22%;
float:left;
margin-right:1%;
padding:1%;
background-color:#FFFFFF;
border: 1px solid #959595;
}
#four-column-col_3{
width:22%;
float:left;
margin-right:1%;
padding:1%;
background-color:#FFFFFF;
border: 1px solid #959595;
}
#four-column-col_4{
width:22%;
float:left;
padding:1%;
background-color:#FFFFFF;
border: 1px solid #959595;
}