trying to remove margin-right of my "<ul>" element - html

Question

Im have 3 columns with list items, and I dont understand why my first column (#col1) have a margin-right tha the other columns dont have.
I want that the margin-right is icual for all of my columns but Im not having sucesso doing this.
Do you see where might be the problem?
My jsfiddle with the problem:
http://jsfiddle.net/ritz/r2Y6d/4/
my html:
<div id="body-content">
<h1>Title</h1>
<img src="image1.jpg" width="700px" height="360px" />
<div id="info">
<h1>Info</h1>
<ul id="col1">
<li><i class="fa fa-phone" title="phone"></i>Phone</li>
<li><i class="fa fa-print" title="Fax"></i>Phone</li>
</ul>
<ul id="col2">
<li><i class="fa fa-home" title="adress"></i> Adress</li>
<li ><i class="fa fa-map-marker" title="Map"></i><a class="button" href="#showMap"><span>Show map</span></a></li>
</ul>
<ul id="col3">
<li><i class="fa fa-envelope-o" title="phone"></i>Email</li>
<li><i class="fa fa-envelope-o" title="Email"></i>Email</li>
</ul>
</div>
My css:
#info h1{color:red; font-size:23px; margin-bottom:0;}
#info ul {list-style:none;}
#info ul li a {text-decoration:none; color:#000;}
#col1{float:left; width:295px;font-size:16px; color:#000; margin-right:0;}
#col2{float:left; margin-right:50px;}

Answer 1

Is THIS what you are trying to do?
I removed the width:295px;, margin-right:0; and add #col3{float:left;}

Answer 2

Your first column, #col1, doesn't have a right margin, because you set margin-right:0; to it.
Rather, your uls have a left padding on them, which is set by default by the browser (left margin on IE 7, all other browsers are left padding.)
To remove the default, you need to add two properties to your rule:
#info ul {list-style:none; margin-left: 0; padding-left: 0; }
http://jsfiddle.net/r2Y6d/5/
That will get rid of the left margin.
However, it does look like tabular data. If you don't know already, the most semantic HTML structure for tabular data is a <table>. Or, if it's simple data-value pairs, you could use a definition list (<dl>).