title: How to correctly adjust the position of the menu items in the fixed-top nav bar?
body: <p>I am having trouble adding padding to the left and right side of the nav bar so the social media buttons and the rest of the menu items are pushed closer towards the center. I tried adding padding to the left and right. However, that moves the position of the button that appears when the menu is collapsed. I have a logo in the center of the nav bar and then social media icons to the right and other menu items the left.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar.navbar-default {
    background-color: #ccc;
    border-color: #ffffff;
    padding-top:15px;
    padding-bottom:15px;
  }
  .navbar.navbar-default .navbar-brand {
    color: #292929;
  }
  .navbar.navbar-default .navbar-brand:hover,
  .navbar.navbar-default .navbar-brand:focus {
    color: #FC9F9F;
  }
  .navbar.navbar-default .navbar-text {
    color: #292929;
  }
  .navbar.navbar-default .navbar-nav &gt; li &gt; a {
    color: #292929;
  }
  .navbar.navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar.navbar-default .navbar-nav &gt; li &gt; a:focus {
    color: #FC9F9F;
  }
  .navbar.navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar.navbar-default .navbar-nav &gt; .active &gt; a:hover,
  .navbar.navbar-default .navbar-nav &gt; .active &gt; a:focus {
    color: #FC9F9F;
    background-color: #ffffff;
  }
  .navbar.navbar-default .navbar-nav &gt; .open &gt; a,
  .navbar.navbar-default .navbar-nav &gt; .open &gt; a:hover,
  .navbar.navbar-default .navbar-nav &gt; .open &gt; a:focus {
    color: #FC9F9F;
    background-color: #ffffff;
  }
  .navbar.navbar-default .navbar-toggle {
    border-color: #ffffff;
  }
  .navbar.navbar-default .navbar-toggle:hover,
  .navbar.navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
  }
  .navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: #292929;
  }
  .navbar.navbar-default .navbar-collapse,
  .navbar.navbar-default .navbar-form {
    border:none;
  }
  .navbar.navbar-default .navbar-link {
    color: #292929;
  }
  .navbar.navbar-default .navbar-link:hover {
    color: #ffd4d4;
  }
  
  .navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
  
  .nav.navbar-nav &gt; li.navbar-left {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11.5px;
  }
  
  .navbar-brand {
    padding: 10px;
  }
  .navbar-brand&gt;img {
    height: 30px;
    width: auto;
  }
  
  @media (min-width: 768px) {
      .navbar-brand { display: block; }
      .navbar-bar-default .navbar-toggle {text-align: left;}
  
  }
  
  @media (min-width: 468px) {
      .navbar-brand { display: block; }
      .navbar-bar-default .navbar-toggle {text-align: left;}
  
  }
  .fa.fa-instagram {
    font-size: 18px;
  }
  .fa.fa-pinterest {
    font-size: 18px;
  }
  .fa.fa-facebook {
    font-size: 18px;
  }
  .fa.fa-twitter{
    font-size: 18px;
  }
  
  .banner {
    width: 100%;
  }
  
  .banner-inner {
    max-width:1100px;
    margin: 0 auto;
  }
  
  @media (min-width:468px) and (max-width:991px){
    .container.navbar-container {
       width:100%;
       padding:0px;
    }
  }
  
  @media (min-width:768px) and (max-width:1024px){
    .container.navbar-container {
       width:100%;
       padding:0px;
    }
  }
  
  
  
  body { padding-top: 90px; }
  @media screen (min-width: 468px) and (max-width: 768px) {
      body { padding-top: 0px; }
  }
  
  .banner-inner&gt;img {
  opacity:0;
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
  }
  
  .col-1-1&gt; img{
  opacity:0;
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"/&gt;
   &lt;meta name="viewport" content="width=device=width, initial-scale=1.0"&gt;
   &lt;title&gt;J&lt;/title&gt;
   &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
   &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
   &lt;link href="css/sticky-footer.css" rel="stylesheet"&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet"&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;!-- Latest compiled and minified CSS --&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
   &lt;!-- Latest compiled and minified JavaScript --&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;/head&gt;
  &lt;body style="padding-top: 70px;"&gt;
  
   &lt;header&gt;
        &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
                &lt;a class="navbar-brand" href="http://"&gt;&lt;img class= "logo" src="img/logo.png"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="navbar-left"&gt;&lt;a href="travel.html"&gt;TRAVEL&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navbar-left"&gt;&lt;a href="portfolio.html"&gt; PORTFOLIO &lt;/a&gt;&lt;/li&gt;
      &lt;li class="navbar-left"&gt;&lt;a href="about.html"&gt; ABOUT &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="right"&gt; &lt;a href="https://www.instagram.com/"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;li class="right"&gt; &lt;a href="https://www.pinterest.com/"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;li class="right"&gt; &lt;a href="https://www.facebook.com/"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;li class="right"&gt; &lt;a href="https://twitter.com/"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt; 
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
      &lt;!--/.container-fluid --&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
   &lt;/header&gt;
  &lt;!---End Header--&gt;
   &lt;section class="banner"&gt;
    &lt;div class="banner-inner"&gt;
     &lt;img onload="this.style.opacity='1';" class="banner" src="img/background.png"&gt;
    &lt;/div&gt;
   &lt;/section&gt;
  &lt;!---End Banner--&gt;
  &lt;!-- Begin page content --&gt;
      &lt;footer class="footer"&gt;
        &lt;div class="container"&gt;
          &lt;span class&gt;Copyright &amp;copy; 2017. All rights reserved.&lt;/span&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  &lt;!---End Footer--&gt;
  &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="../../assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>