CSS align text so its in straight line - css

Question

I have split the page in 3 sections
25% width
50% width
25% width
How can i get my menu in straight line after using text-align:right. I don't want to use margin-left cause without using it the web is more responsive to other devices and looks more appealing.
What i expect to get - Imagur Image of expected outcome.
I want menu to start at yellow line.
My current code in JSFiddle - JSFiddle Example

Answer 1

If you're going to be using Bootstrap, you might as well just use the existing grid system that comes with it. In order to left align an element with right aligned text, you can simply float it:
ul {
list-style-type:none;
margin:0;
padding:0;
text-align:right;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="col-xs-6">
<table>
<thead>
<tr>
<th colspan="2">Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
test
</div>
</div>
</div>

Answer 2

You simply need to add this css code:
.first ul{
text-align:left;
}
Your code would become:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#import url('//netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css');
.first{
width:25%;
overflow:hidden;
float:left;
text-align:right;
}
.first ul{
text-align:left;
}
.table{
width:50%;
float:left;
}
.three{
width:25%;
float:right;}
<div class="main">
<div class="first">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<table class="table">
<thead>
<tr>
<th colspan="2">Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="three">
<p>
test</p>
</p>
</div>
</div>
I hope it helps.