I'm experimenting with the Responsive Grid System for the first time and encountering difficulties getting my columns to display side by side. I have a two column grid setup for some design elements and centered content for others.
Below is the relevant HTML:
<div class="section group" id="about">
<div class="col span_1_of_2" id="p1">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col span_1_of_2" id="p2">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
and corresponding CSS:
.section {
clear: both;
padding: 0px;
margin: 0px;}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;}
.span_2_of_2 {
width: 51.8%;}
.span_1_of_2 {
width: 49.2%;}
Why are my columns stacking vertically instead of horizontally? What could be causing this issue?
(you can access the responsive grid here)
Appreciate any insights!