H1, Ul and H2 inline positioning with CSS - css

Question

I need to make responsive header with H1, UL menu and H2.
The H1 - about 5% from the left corner. The H2 - about 5% from right corner. And between them is UL menu, which I need to place in the center. Everything in one line... And HR line under this line.
How to position UL menu in the CENTER ?
jsFiddle EXAMPLE
HTML :
<div class="container">
<header class="clearfix">
<!-- TITLE 1 -->
<h1>Title 1 </h1>
<!-- UL -->
<ul>
<li> menu 1</li>
<li> menu 2</li>
<li> menu 3</li>
</ul>
<!-- TITLE 2 -->
<h2>Title 2 <br/><span>span</span></h2>
<hr />
</header>
</div>
CSS :
.container > header {
width: 90%;
margin: 0 auto;
position: relative;
padding: 40px 30px 20px 30px;
}
.container > header h1 {
padding-left: 5px;
font-size: 30px;
line-height: 37px;
margin: 0 auto;
font-weight: 700;
color: #000;
display:inline !important;
float: left;
}
.container > header h2 {
padding-right: 5px;
font-size: 14px;
line-height: 14px;
margin: 0px 0px 0px auto;
font-weight: 700;
color: #000;
display:inline !important;
float: right;
text-align: right;
}
.container > header h2 span {
font-size: 10px;
line-height: 11px;
font-weight: 700;
color: #000;
}
.container > header ul {
font-size: 10px;
line-height: 11px;
font-weight: 700;
color: red;
}
.container > header ul li {
float: left;
list-style-type: none;
padding: 0px 5px 0px 5px;
}
.container > header hr {
border:0;
color:#000;
background:#000;
height:1px;
clear: both;
}

Answer 1

You can use floated divs and text-align to achieve this. Here's the HTML:
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
And the CSS to align them properly:
.left { float: left; width: 25% }
.center { float: left; width: 50%; text-align: center; }
.right { float: left; width: 25%; text-align: right; }
Here's a jsFiddle demo.