Help needed with moving the Uni section to align it beside other paragraphs and headers. Tried using float left but no luck so far. Any suggestions would be appreciated! Check out the code here
<div class ="container">
<div id="education" class ="learn-more">
<h2>Education</h2>
<h3>2003 - 2008 Haslingden High school</h3>
<p>9 GCSEs
Grades B - C</p>
<h3>2008 - 2010 Haslingden High School sixth form </h3>
<p>3 A levels IT (B)</p>
<p>Level 3 BTEC National Award in Applied science (Forensic science (Pass)</p>
<p>level 3 BTEC National Award in Media production (print-based media) (Distinction)</p>
<div class="uni">
<h3>2010 - 2013 Bachelor of Science in Engineering and Multimedia Computing 2:2
Manchester Metropolitan University</h3>
<p>Detailed list of course subjects...
...
...
...
</p>
</div>
</div>
</div>
CSS:
.learn-more {
background-color: #f7f7f7;
clear: both;
overflow:auto;
}
.learn-more .uni {
float:left;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto; }
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}