Splitting header into 2 columns (50% each side) on Bootstrap

Issue

I am currently building a site with Bootstrap (everything is on 1 single page).

For the home page I want it to look like this:

________________________ 
|       <Navbar>        |
|_______________________|
|   Title   |           |
|           |    Icons  |
|   Loader  |           |
|           |    Photo  |
|           |           |
|           |           |
|        <Header>       |
|___________|___________|
|        About Me       |
|           etc..       |

Whats the best way in formatting the page like this. A simple 50/50 split in the header in html/css.

I have tried floats and now i am doing the bootstrap columns

    <Header>
    <! LEFT SIDE !>         
    <div class="col-xs-6">
     <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
     <div class="loader">Loading...</div>             
    </div>

    <! RIGHT SIDE !>
    <div class="col-xs-6"> 
      <p> Join me on</p>
      <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
      <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
    </div>  

However with this method, I don't really know how to style this in the CSS as they are both .col-xs-6 and it styles both sides. But is this how you would split the page or is there a better, easier method to keep it within its margins and to stay responsive?

When I used the left/right float method, the background colour kept overlapping into the 'About Me' section.

Solution

I would do it like this:

<div class="container">
  <header>
    <div class="row">
      <div class="left col-xs-6">
       <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
       <div class="loader">Loading...</div>             
      </div>
      <div class="right col-xs-6"> 
        <p> Join me on</p>
        <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
        <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
      </div>
    </div>
    <div class="clearfix"></div>
  </header>
</div>

Bootply Example

Answered By - APAD1