Text won't reach right side of browser window when using Bootstrap - html

Question

I would like to have two columns on the main page below the header: one on the left displaying social media (which is working fine) and one on the right displaying a little welcoming blurb. I am using the offset column, but it is still giving a gap. If I increase the offset to 4 to reach of total of 12 for the grid, the blurb moves down as if it is going beyond the 12. I'm not sure what I'm missing here.
This is my first time posting on stackoverflow, so hopefully I am including enough code for the problem. If not, let me know. Thanks!
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<div class="container-fluid">
<section class="social-media col-md-4">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
neon.honey
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
#deephoney
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/facebook.png" alt="Facebook">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Molly
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Neon Honey
</div>
</div>
</section>
<section class="hello col-md-4 col-md-offset-3">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero,
cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit
commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>

Answer 1

Make sure you are using the correct window size class:
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
http://getbootstrap.com/css/#grid-options
you can use the offset as well like just to complete the rest of the columns you are not using.
just like the example bellow.
I need to use the .col-xs prefix to satisfy the window size of the snippet.
you can also "force" a div to float right or left in the document.
you will need to read this:
http://www.w3schools.com/css/css_float.asp
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<section class="social-media col-xs-4">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
neon.honey
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
#deephoney
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/facebook.png" alt="Facebook">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Molly
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2">
<img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Neon Honey
</div>
</div>
</section>
<section class="hello col-xs-4 col-xs-offset-4">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero,
cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit
commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
</div>