For some reason, my images don't have lined up links - html

Question

I could be missing some coding, but here is what I mean:
Messed up one
Perfectly fine one
Basically, on the messed up web page, my links don't align like the other pages. My coding for the MESSED UP ONE is:
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p><form action="" method="post" id="form-radio">
<p>
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_0" />
Yes</label>
<br />
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_1" />
No</label>
<br />
</p>
</form></p><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
The coding for the PERFECTLY FINE page is:
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
And lastly, the CSS STYLE SHEET for BOTH pages is:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
margin:0px;
padding:0px;
}
#rollover
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
}
#firstlink
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a img
{
border:none;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
#form-radio
{
float:left;
}
Any help would be MUCH appreciated, Thanks