Here’s what your code looks like:
<font color="red"><strong>Section 2: Graphic Design</strong></font><br />
<strong>Art Structure<br />
Layout Structure</p>
<blockquote><p>Balance<br />
Prominence<br />
Distribution</p></blockquote>
Between “Layout Structure” and “Balance” you have the end of a paragraph, the start of a blockquote, and the start of a new paragraph. Unless you’re going to have no margins around paragraphs (which means no spacing between paragraphs) you’re going to end up with the layout that’s displayed (which is a perfectly logical one, in my view, given the tags you’ve used, although of course it’s not what you want to be seeing).
I’d suggest the basic problem is that you’re using the wrong tools in having paragraphs and blockquotes to style this text.
First, I think it would be better to create a new class of heading (say an h2 heading) that’s styled red, so that you don’t have to have that [font color=”red”] in your code. That h2 should also be styled to be bold and to have a margin-bottom of 0. Semantically, the stuff in red is headings.
Also, semantically, the rest of the stuff is an unordered list and so I’d suggest creating a class of unordered list — <ul> — that a margin-bottom and margin-top of 0.
Balance would then be a nested list within the list that begins with art structure and layout structure. The nested list would be indented but would also have no top or bottom margins because it would inherit those from the parent list.
And you wouldn’t need all those <br /> tags!
Does that make sense? If not, look up [css unordered list] on Google and you’ll find plenty of resources.
So your code would end up looking something like this (plus of course the style rules that specify the margins).
<h2 class="red">Section 2: Graphic Design</h2>
<ul class="whatever">
<li>Art Structure</li>
<li>Layout Structure</li>
<ul>
<li>Balance</li>
<li>Prominence</li>
<li>Distribution</li>
</ul>
</ul>
