Bootstrap 3 - How to move/offset "Brand" text/logo to the right (and offset the text at the end to the left)

Question

Okay, I started exploring Bootstrap and in that process, constructed the basic navbar that is at the top of the page. But when I follow the demo code that bootstrap has provided on their page and create the navbar, what happens is that the "Brand" text goes to the very left of the bar that is close to the edge of the page (on the desktop). I am attaching the image below that shows what I mean:

Here is the snippet of the relevant code:

    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

So I would like to offset the "Brand" a little bit of however much I want to the right. Also similarly you could see in the above image that the "Link" and "Dropdown" at the very right of the bar. How do I offset it to the left? Or in other words I would like to have the text/logo in the bar begin and end with offsets instead of sticking to the extreme left and extreme right.

To my surprise, when I look at the sample Bootstrap pages, for example take a look at this page the text on the top navigation bar ("Project name") is offset from the right and the left and I don't see anything special they have done to do the offset. But when I use the same code, it shows up at the very edge.

Oh, wait, I see that they have used

  <div class="container">

whereas I have used

  <div class="container-fluid">

So it seems like using "container" gives the offset, whereas using "container-fluid" pushes it to the extremes of the bar?

But regardless, how do I create offset (by a certain amount on the left and right) as I wish?

@jorn - thanks for your response. Unable to add this to the comment section, hence editing the posting to add my question:

I added it to the CSS and it is working and now offsetting it by 50 px. That is good. Similarly I added the 50px offset to navbar-right and it is creating offset at the right too. But now the challenge is how do I EXACTLY vertically align this Brand to the first column in the body below for which I have used the following code:

   <div class="container-fluid">
    <div class="row">
          <div class="col-md-10 col-md-offset-1">

Now given we are using 50 px; for the Brand offset, but using "div class="col-md-10 col-md-offset-1"> for the body column, how could I guarantee that there is absolute vertical alignment between the Brand and the first column of the body? Right now, it doesn't seem to align, as shown in the image below:

I don't want to be doing guesswork on how much value I should define in for the offset i.e. say 50 px; or 49 px; or 39 px; etc. - is there another absolute sure way to define the offset of the brand in such a manner that it automatically aligns? Thanks.

Edit 2:

Looking at the CSS code I figured this:

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

Then accordingly to my style.css I added:

.navbar-brand {
     margin-left:8.33333333% !important;
}

But in spite of this, the Brand and the body's first column aren't aligning as shown in the image below:

Any idea why there is still mis-alignment? Thanks.

Answer 1

You can just use margin-left, here's a fiddle

.navbar-brand
{
     margin-left:50px !important;
}

EDIT

I'm sorry it took a while, but I've reworked the fiddle. You can find the answer here.

.navbar-header{
    width:200px;
    margin-left:8.3333% !important;
}
.content{
    margin-top:100px;
}

The margin left from the offset had to be on the navbar-header instead of the navbar-brand. I hope this helps you for your project.