title: Bootstrap 3 - How to move/offset "Brand" text/logo to the right (and offset the text at the end to the left)
body: <p>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 &quot;Brand&quot; 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:</p>
  <p><img src="https://i.stack.imgur.com/QJw8M.png" alt="enter image description here" /></p>
  <p>Here is the snippet of the relevant code:</p>
  <pre><code>    &lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class=&quot;navbar-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  <p>So I would like to offset the &quot;Brand&quot; a little bit of however much I want to the right.
  Also similarly you could see in the above image that the &quot;Link&quot; and &quot;Dropdown&quot; 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.</p>
  <p>To my surprise, when I look at the sample Bootstrap pages, for example <a href="http://getbootstrap.com/examples/jumbotron/" rel="nofollow noreferrer">take a look at this page</a> the text on the top navigation bar (&quot;Project name&quot;) 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.</p>
  <p>Oh, wait, I see that they have used</p>
  <pre><code>  &lt;div class=&quot;container&quot;&gt;
  </code></pre>
  <p>whereas I have used</p>
  <pre><code>  &lt;div class=&quot;container-fluid&quot;&gt;
  </code></pre>
  <p>So it seems like using &quot;container&quot; gives the offset, whereas using &quot;container-fluid&quot; pushes it to the extremes of the bar?</p>
  <p>But regardless, how do I create offset (by a certain amount on the left and right) as I wish?</p>
  <p>@jorn - thanks for your response. Unable to add this to the comment section, hence editing the posting to add my question:</p>
  <p>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:</p>
  <pre><code>   &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-10 col-md-offset-1&quot;&gt;
  </code></pre>
  <p>Now given we are using 50 px; for the Brand offset, but using &quot;div class=&quot;col-md-10 col-md-offset-1&quot;&gt; 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:</p>
  <p><img src="https://i.stack.imgur.com/R9haP.png" alt="enter image description here" /></p>
  <p>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.</p>
  <p>Edit 2:</p>
  <p>Looking at the CSS code I figured this:</p>
  <pre><code>  .col-md-offset-1 {
      margin-left: 8.33333333%;
    }
  </code></pre>
  <p>Then accordingly to my style.css I added:</p>
  <pre><code>.navbar-brand {
       margin-left:8.33333333% !important;
  }
  </code></pre>
  <p>But in spite of this, the Brand and the body's first column aren't aligning as shown in the image below:</p>
  <p><img src="https://i.stack.imgur.com/mluED.png" alt="enter image description here" /></p>
  <p>Any idea why there is still mis-alignment? Thanks.</p>