Check out this code snippet from
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li><a href="">Comprehensive Curriculum</a></li>
<li><a href="">Insightful Guest Lectures</a></li>
<li><a href="">Interaction with Sponsors</a></li>
<li><a href="">$30,000+ in Total Prizes</a></li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
It's weird that the links within ul.link-gr are not staying inside the designated div element. They seem to be positioned outside the box while everything else remains enclosed within div.wrapper2. Any insights on why this is happening would be greatly appreciated.
Thank you!