grid empty space

Hello, I am making a 3 colunm grid using the GP grid. The problem I am having is that the grid is non responsive. when the window gets to 1024px, the columns all line up on the left. Here is the code I am using. I tried the columns plugin you have but I don't like to use the visual editor and ... It resulted in near same outcome.
Any help will be appreciated !
-Chad
`<!-- Info Box 3 wide -->
<div class="hidegrid grid-10">.</div>
<div class="grid-30">
<ul>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
</ul>
</div>
<div class="grid-30">
<ul>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
</ul>
</div>
<div class="grid-30">
<ul>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
<li class="li-services">This is a list of stuff like this</li>
</ul>
</div>
<div class="hidegrid grid-10">.</div>
<!-- /Info Box 3 wide -->`