Floating CSS-I'm probably doing something wrong - css-float

Question

I'm a newbie in HTML/CSS and i don't know why when i resize my window for less than 480px width, the third "pack" doesn't also float to the left.
Any help would be much appreciated.
Thank you!
http://codepen.io/anon/pen/EaymKP?editors=110
.packages{
width:92%;
margin:0 auto;
}
.pack{
margin-left:-0.483091%;
width:25.483091%;
background-color:#e0e0e0;
border-radius:5px;
float:left;
position: relative;
z-index: 1;
}
.pack ul li:first-child{
border-top:none;
}
.pack ul{
list-style-type: none;
text-align: center;
}
.pack ul li {
border-top:1px solid #ffffff;
font:normal 0.83875em Arial,sans-serif;
color:#797979;
height:18px;
padding:13px 0;
}
.pack ul li a{
display:block;
text-decoration: none;
color:#ffffff;
font:bold 1.118125em Arial,sans-serif;
width:72.985781%;
height:29px;
background-color:#575757;
border-radius:20px;
text-align: center;
padding-top:10px;
margin:0 auto;
}
.pack ul li.last-child{
border-radius: 0 0 5px 5px;
border-bottom:1px solid #e0e0e0;
padding:30px 0;
height:29px;
}
.pack.third_column ul li.last-child{
height:29px;
padding:38px 0;
}
.pack .column_top h1,h2{
color:#ffffff;
}
.pack .column_top h1{
font:bold 1.3975em Arial,sans-serif;
padding-top:4px;
}
.pack .column_top h2{
font:bold 1.1475em Arial,sans-serif;
margin-top:-6px;
}
.pack .column_top h2 span{
font:bold 2.1875em Arial,sans-serif;
}
.column_top{
height:75px;
border-radius:5px 5px 0 0;
text-align: center;
position: relative;
z-index: 4;
}
.column_top sup{
font-size: 1.5em;
}
.first_column{
background-color:#cbcbcb;
}
.first_column .column_top{
background:url(../images/top_bg_grey.png) repeat-x;
}
.pack.first_column .column_top h1{
color:#e0e0e0;
font:bold 1.40625em Arial,sans-serif;
padding:10px 30px 10px 30px;
}
.pack.first_column ul li{
border-top:1px solid #a2a2a2;
color:#5c5c5c;
}
.pack.lateral{
box-shadow:-4px 0px 10px -5px #000;
}
.pack.lateral .column_top{
background:url(../images/top_bg_blue.png) repeat-x;
}
.pack.third_column{
background:#ffffff;
box-shadow: 0 0 10px #000;
z-index: 5;
}
.pack.third_column .column_top{
background:transparent url(../images/green_shape.png) no-repeat;
width:100.54%;
height:98px;
top:-20px;
left:-1px;
}
.pack.third_column ul li:first-child{
margin-top: -22px;
border-top: none;
}
.pack.third_column ul li{
border-top:1px solid #dadada;
}
.pack.third_column ul li a{
background-color:#e43a22;
}
#media screen and (min-width:320px) and (max-width:480px){
.pack{
width:50%;
margin-top:20px;
}
.pack.third_column .column_top{
background:transparent url(../images/green_shape.png) no-repeat;
background-size: 100%;
height:75px;
position:static;
}
.pack.third_column ul li:first-child{
margin-top: 0;
}
.media ul li{
padding-left: 0;
}
#img_videos,#img_photos,#img_news,#img_schools{
padding-right: 0;
}
}
}
<div class="packages">
<div class="pack first_column">
<div class="column_top">
<h1>Pes</h1>
</div>
<ul>
<li>Mo</li>
<li>Mo</li>
<li>Eqt</li>
<li>Cnt</li>
<li>Ole</li>
<li>Tes</li>
<li>Gs</li>
<li class="last-child"><img src="images/arrow.png" alt="arrow"/></li>
</ul>
</div>
<div class="pack lateral second_column">
<div class="column_top">
<h1>Sivkage</h1><h2><sup>$</sup><span></span>0<sub>/mo</sub></h2>
</div>
<ul>
<li>1</li>
<li>1</li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li class="last-child">SIGN UP</li>
</ul>
</div>
<div class="pack third_column">
<div class="column_top">
<h1>Gage</h1><h2><sup>$</sup><span>9</span><sub>/mo</sub></h2>
</div>
<ul>
<li>2</li>
<li>2</li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/no.png" alt="no"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li class="last-child">SIGN UP</li>
</ul>
</div>
<div class="pack lateral">
<div class="column_top">
<h1>Pre</h1><h2><sup>$</sup><span>1</span><sub>/mo</sub></h2>
</div>
<ul>
<li>Unlimited</li>
<li>Unlimited</li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li><img src="images/yes.png" alt="yes"/></li>
<li class="last-child">SIGN UP</li>
</ul>
</div>
</div>

Answer 1

Your problem is that you have a fixed height on your li-elements.
.pack ul li {
border-top:1px solid #ffffff;
font:normal 0.83875em Arial,sans-serif;
color:#797979;
height:18px;
padding:13px 0;
}
Remove it. If you want your packs to have equal height you can add min-height to it:
.pack{
margin-left:-0.483091%;
width:25.483091%;
background-color:#e0e0e0;
border-radius:5px;
float:left;
position: relative;
z-index: 1;
min-height:570px;
}

Answer 2

Meanwhile, I replaced border-top:none for the first li in the pack with 1px transparent and it worked.