Not able to get this link alligned properly - html

Question

Edit: I'm not an Html pro.
I want to add this text :
AIM -> Historian
AIM -> AIM
AIM -> PI
Historian -> PI
Perfectly aligned like the ones above in the picture. It is one link with all this text.
I have tried <p style ="text-indent:5em; and I have also tried to make a <ul style ="text-indent:5em; but the spacing is still weird an not what I want. As you can see there is an empty space above which is unneeded and the Text alignment is not proper.
The Code
<div class="tabContentBorders">
<div id="tab1">
<p><strong>Data Acquisition and Reporting</strong></p>
<p>        High-Speed Data Acquisition</p>
<p>        Custom Driver Development</p>
<p>        Custom Reporting Solutions</p>
<p><strong>15) Historian Migration</strong></p>
<p style ="text-indent:5em;">        <br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<p><strong>Custom Windows Application</strong></p>
<p>        SOE/TRA Suite</p>
<p>        TCP Time-Sync</p>
<p>        Power Calculations</p>
</div>
Style Sheet
body { background: #000 url("../images/background.jpg") no-repeat center top; }
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p, td { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #fff; font-weight: normal; }
.frame { z-index: 10; margin-left: auto; margin-right: auto; width: 970px; margin-bottom: 20px; position: relative;}
/* CSS grid credit 960 Grid System http://960.gs */
/* Must declare this for all containers with widths in the layout grid so they properly align alongside of each other */
.leftCol, .rightCol, .headerBox, .shadedBox ul, .rightSplitCol
{ display:inline; float:left; margin-left:0; margin-right:0; }
.topBox { display: block; height: 82px; background: url("../images/header.jpg") no-repeat left top; margin-bottom: 18px; }
.topNav { margin:0; padding:0; float: right; position: relative; top: 10px; right: 10px; text-align: right; font-size: 13px; }
.topNav a:link, .topNav a:visited { color: #fff; text-decoration: none; } .topNav a:hover { text-decoration: underline; }
.leftCol { width: 515px; }
.leftCol .box { margin: 15px 20px !important; }
.rightCol { width: 435px; margin-left: 20px; } .rightSplitCol { width: 232px; margin: 5px 0 0 0; } .splitColspace { margin-left: 10px;}
.rightSplitCol p { font-size: 13px !important; padding: 0 0 5px 0; }
.mission { padding: 10px 0 0 10px;}
.headerBox { color: #000; margin-bottom: 5px; padding: 5px 20px 5px 10px; font-size: 18px; } .headerBoxPink { color: #000; margin-bottom: 10px; padding: 5px 20px 5px 10px; font-size: 15px; background-color: #d81c3f; }
.boxBlue { background-color: #00b9e4;} .boxOrange { background-color: #e87511;} .boxGreen { background-color: #c3cf21;}
.shadedBox { background: url("../images/bkgrdBox.png") repeat; } .venue { margin-bottom: 9px; padding: 7px !important; } .boxMargin { padding: 7px;}
.shadedBox a:link, .shadedBox a:visited { color: #c3d603; } .shadedBox a:hover, .shadedBox a:visited:hover { text-decoration: none; }
.shadedBox ul { list-style: disc; padding: 7px 0 5px 10px; font-size: 13px; } .shadedBox li { padding-bottom: 0.75em; line-height: 1.4em;}
ul.leftSide { width: 200px; margin-left: 15px; margin-right: 0;} ul.rightSide { width: 210px; margin-left: 18px; margin-right: 0;}
.shadedBox p { font-size: 14px; line-height: 1.2em; } .venue p { line-height: 1.3em !important; }
.small{ color: #ccc; font-size: 12px; } .big { font-size: 26px; padding-top: 5px;}
.button { float: right; }
.iconSubscribe { float: right; padding: 25px 0 0 5px;} .iconOpen { float:left; padding: 0 10px 0 0;}
a.whiteLink { color: #fff !important; }
.footer { background: url("../images/footerDots.png") no-repeat left top; margin: 10px 0 10px 20px;}
.footer p { font-size: 11px; margin-top: 20px;}
.brands { background-color: #636466; display:inline; float:right; color: #000; padding: 5px 10px; font-size: 13px;}
.brands a:link, .brands a:visited { color: #000; text-decoration:none; } .brands a:hover, .brands a:visited:hover { text-decoration:none; }
/* 960 Grid System: Clear style used with various floated containers */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after {clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix {display:inline-block}
* html .clearfix{height:1%}
.clearfix {display:block}

Answer 1

I'd suggest a simple rewrite of the base-code. Here, I use an H3 for the headers, and target the paragraphs. Unless you use white-space:pre white-space will always collapse to the width of one space.
The code can be cleaned up more, with less paragraph tags, but here's a quick idea.
http://jsfiddle.net/Ufx58/1/
HTML
<div class="tabContentBorders">
<div id="tab1">
<h3>Data Acquisition and Reporting</h3>
<p> High-Speed Data Acquisition</p>
<p> Custom Driver Development</p>
<p> Custom Reporting Solutions</p>
<h3>15) Historian Migration</strong></h3>
<p style ="text-indent:5em;"> <br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<h3>Custom Windows Application</h3>
<p> SOE/TRA Suite</p>
<p> TCP Time-Sync</p>
<p> Power Calculations</p>
</div>
CSS
h3{
font-weight:bold;
font-size:1.2em;
}
#tab1 p{
padding-left:2em;
}

Answer 2

This is how I did it and it works
<p><strong>Data Acquisition and Reporting</strong></p>
<p style="padding-left : 2em;">High-Speed Data Acquisition</p>
<p style="padding-left : 2em;">Custom Driver Development</p>
<p style="padding-left : 2em;">Custom Reporting Solutions</p>
<p><strong>Historian Migration</strong></p>
<p style="padding-left : 2em;"><a href="IOM_EnterpriseControl.html">
AIM -> HistorianAIM -> AIM<br>
AIM -> PI<br>
Historian -> PI<br>
</a>
</p>
<p><strong>Custom Windows Application</strong></p>
<p style="padding-left : 2em;">SOE/TRA Suite</p>
<p style="padding-left : 2em;">TCP Time-Sync</p>
<p style="padding-left : 2em;">Power Calculations</p>