Top-Bar Navigation keeps bleeding outside of Jumbotron

I’ve created a TopBar Navigation for my “portfolio” page as a part of the “Build a Personal Portfolio Webpage” project… but it isn’t working as intended. I’d like it to just sit at the top of the page, inside the Jumbotron, but instead it bleeds waaayy off to the right going outside of the Jumbotron. Is there a way to limit its width? I’ve adjusted the width to 54.62%, which allows it to perfectly fit in the Jumbotron, but that doesn’t seem to be a great way to do it as re-sizing the window screws all that up. Setting width to 100% or removing the width attribute entirely makes it bleed way outside of the Jumbotron. I just want it to fit in exactly horizontally.

Current code is below:

#TopBar {
    position: fixed;
    top: 0px;
    background-color: #333333;
    color: #FFFFFF;
    padding-bottom: 15px;
    padding-top: 15px;
    list-style-type: none;
    width: 54.62%;

#TopBar li {
  float: left;
  padding-right: 30px;
  text-align: center;

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-8">
        <ul id="TopBar">