Centering the Of A Navigation Bar

This is how the navigation bar of a website I'm currently working on appears i.e to the left:

I would however like to shift the navigation bar to the right of the screen such that 'Editorial' is against the right border of the screen. What changes would I have to make to the following CSS/HTML code of the same?

CSS Code Of Navigation Bar

.navbar-inverse {
  background-color: transparent;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  background-color: #FF0346;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #FF0346;
}
.dropdown-menu {
  background-color: #FFFFFF
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #FF0346
}
.navbar-inverse {
  background-image: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-image: none;
}
.navbar-inverse {
  border-color: transparent;
}
.navbar-inverse .navbar-brand {
  color: #A6A6A6
}
.navbar-inverse .navbar-brand:hover {
  color: #0D0D0D
}
.navbar-inverse .navbar-nav>li>a {
  color: #000000;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  color: #FFFFFF
}
.dropdown-menu>li>a {
  color: #333333
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-top-color: #999999
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-top-color: #FFFFFF
}
.navbar-inverse .navbar-nav>.dropdown>a .caret {
  border-bottom-color: #999999
}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #FFFFFF
}

<!-- begin snippet: js hide: false -->

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header" float>
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.php" class="navbar-brand"><img src='dummylogo.png' width="100" height="100" alt="HEG Logo"></a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.php">Home</a>
        </li>
                                
        <li>
          <a href="gameprojects.php">Game Projects</a>
        </li>
        <li  >
          <a href="hardware.php">Hardware</a>
        </li>
        <li>
          <a href="wvm.php">Written & Visual</a>
        </li>
<li class="active">
          <a href="twitchcorner.php">Twitch Corner</a>
        </li>
<li>
          <a href="Community.php">Community</a>
        </li>
<li>
        <a href="editorial.php">Editorial</a>
        </li>
      </ul>
    </nav>
  </div>
</header>