Having trouble lining up my images.

Hi, I’m having trouble lining up my images on a Website. I want them positioned under each other on the right side of the screen with a little bit of padding between them. But, what happens is that one pic will be positioned at the top on the right side, but the second pic will be below but further to the left, kind of indented, so to speak. Here’s my code.

CSS

[CODE]
img.photo1 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 0;
border: 0;
}
img.photo2 {
height: 200px;
width: 190px;
padding-left: 4px;
padding-top: 6px;
border: 0;
}
[/CODE]

[code=html]
<div id=”banner”>
<h1><img alt=”banner (21K)” src=”The.JPG” height=”110″ width=”825″ /></h1>
</div>

<!– pic 1 –>
<a href = “pic 045.jpg”>
<img class = “photo1” align = “right” src = “pic 045.jpg” alt = “pic 1” /></a>

<p><span style = “font-family: cursive;”>blah</span> blah blah blah blah blah blah. blah blah blah blah blah
blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

Blah <span style = “font-family: cursive;”>Blah</span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah, blah blah blah blah blah whatever I want; It will </p>

<!– pic 2 –>
<a href = ” pic 044.jpg”>
<img class = “photo2” align = “right” src = “pic 044.jpg” alt = “pic 2” /></a>

<ol type = “1”>
<li>Text.</li>
<li>text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
<li>Text.</li>
</ol>
[/code]

Does anyone know what I’m doing wrong? I just want the two pictures to line up right under each other on the right side of the screen, but the second pic gets indented and ends up being side-by-side the 1st pic, but a few inches down from the page, not under the first pic.

Also in #CSS _↴