So I have a news section in the content area of this website, it displays the avatar of the person who posted, a heading, and then a small description. 

The problem is, the headings don't line up with the avatars well, and I think it's creating unnecessary space between my vertically aligned news articles. 

This is what it looks like:

[![What it looks like](https://i.stack.imgur.com/wEXVB.png)](https://i.stack.imgur.com/wEXVB.png)

What I want it to look like:

[![What I want it to look like](https://i.stack.imgur.com/XRhHi.png)](https://i.stack.imgur.com/XRhHi.png)

Relevant code:

```css
#news {
 float: right;
 width: 45%;
}

#news h1 {
 font-weight: bold;
 background-color: #828CAA;
 font-size: 13px;
 margin-bottom: 2px;
 color: #FFFFFF;
 margin: 0px;
}

#news a {
 color: #00366C;
 margin-top: 3px;
 padding-left: 5px;
 font-weight: bold;
}

#news p {
 padding-left: 5px;
 display: inline;
}

#news img.avatar {
 margin-top: 5px;
 float: left;
 border: 1px #00366C solid;
}
```

```html
<section id="news">
<h1>News</h1>

<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a><br>
<p>You should know the drill by now.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a><br>
<p>And angry.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a><br>
<p>I do believe that it's a review update.....</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a><br>
<p>Games! Games? Games?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a><br>
<p>Have I?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a><br>
<p>Click here for lots of exciting new games!</p>
<br><br><br>

</section>
```