Stop columns within rows dropping down when website resizes

Hey Guys,
I’ve struggling to find information around on how to do this, basically I want to create a fixed minimum width for my website so the widgets don’t re-align and drop themselves underneath each when the page resizes.
I want to keep all the widgets on the same row, encouraging the user to keep the website at a decent size.
I’ve tried numerous bits of code with some results:

html {
min-width: 1200px;
margin: 0 auto;
position: relative; /* Fix for absolute positioning */
}

Manged to keep the entire website at size, but rows still readjust

@media (max-width:780px){
pgc-458-0-0 , #pgc-458-0-1 , #pgc-458-0-2 { width:23.333% }
#pg-458-0 , #pg-458-1 , #pl-458 .panel-grid-cell .panel { margin-bottom:20px } 
#pg-458-0 .panel-grid-cell , #pg-458-2 .panel-grid-cell { float:left }
 #pgc-458-2-0 { width:61.95% } 
#pgc-458-2-1 { width:18.05% } 
#pl-458 .panel-grid-cell .panel:last-child { margin-bottom:0 } 
#pg-458-0 , #pg-458-2 { margin-left:-10px;margin-right:-10px } 
#pg-458-0 .panel-grid-cell , #pg-458-2 .panel-grid-cell { padding-left:10px;padding-right:10px }
 }

No changes

@media (max-width: 780px) {
#pg-458-0 .panel-grid-cell, #pg-458-1 .panel-grid-cell, #pg-458-2 .panel-grid-cell {
float: left !important;
width: 33.33% !important;
}
}

No changes either.
Any ideas on what to do?

URL: http://www.thepartyvote.com