title: Make bs4 navbar in content box
body: <p>So i have problem with bs4 navbar so lets explain more about the problem:</p>
  
  <p>I have page with content box that have container and i want above of it to put the navbar i want to make somethink like this <a href="https://i.stack.imgur.com/FUEC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FUEC9.png" alt="enter image description here"></a></p>
  
  <p>But when i try to make it happend that:</p>
  
  <p><a href="https://i.stack.imgur.com/s6H4w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s6H4w.png" alt="enter image description here"></a></p>
  
  <p>So here is my html file</p>
  
  <p>
  </p>
  
  <p>
      
      
      
      </p>
  
  <pre><code>&lt;title&gt; {{ $title }} &lt;/title&gt;
  
  
  &lt;!-- CSS --&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="{{ asset('css/style.css') }}"&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  &lt;script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"/&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body class="scrollbar-inner"&gt;
  
  &lt;div id="particles-js"&gt;&lt;/div&gt;
  @if(!Auth::user())
      &lt;script type="text/javascript"&gt;
          $(window).on('load', function () {
              $('#userLogin').modal('show');
          });
      &lt;/script&gt;
      @include('modals.login')
  @endif
  
  
  &lt;div class="servername"&gt;
      {{ $heading }}
  &lt;/div&gt;
  &lt;h1 class="ip" onclick="CopyToClipboard('to-copy')"&gt;
      &lt;div id="to-copy"&gt;{{ $main_ip }} &lt;b class="fa fa-copy"&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/h1&gt;
  
  
  &lt;div class="content-box"&gt;
              &lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark"&gt;
          &lt;!-- Brand --&gt;
          &lt;a class="navbar-brand" href="#"&gt;Logo&lt;/a&gt;
  
          &lt;!-- Links --&gt;
          &lt;ul class="navbar-nav"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Link 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Link 2&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;!-- Dropdown --&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"&gt;
                      Dropdown link
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu"&gt;
                      &lt;a class="dropdown-item" href="#"&gt;Link 1&lt;/a&gt;
                      &lt;a class="dropdown-item" href="#"&gt;Link 2&lt;/a&gt;
                      &lt;a class="dropdown-item" href="#"&gt;Link 3&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;div class="maincontent-box"&gt;
  &lt;/div&gt;
  
      &lt;div class="sidebar"&gt;
          @if(Auth::user())
              &lt;div class="dropdown userPane"&gt;
                  &lt;button style="color:#000000; width: 111%; background: #D3D3D3" class="btn btn-default dropdown-toggle"
                          data-toggle="dropdown"&gt;
                      &lt;img src="http://cravatar.eu/head/{{ Auth::user()-&gt;username}}/128.png" width="32px;"
                           height="32px;"/&gt; {{ Auth::user()-&gt;username }}
                  &lt;/button&gt;
                  &lt;div class="dropdown-menu" style="width: 111%"&gt;
                      &lt;a class="dropdown-item"&gt;
                          &lt;center&gt;
                              &lt;img src="http://cravatar.eu/head/{{ Auth::user()-&gt;username }}/128.png" width="32px;"
                                   height="32px;"/&gt;
                          &lt;/center&gt;
                      &lt;/a&gt;
                      &lt;div class="dropdown-item"&gt;
                          &lt;center&gt;
                              Репутация: &lt;span
                                  class="badge badge-{{ Auth::user()-&gt;reputation == 10 ? 'success' : 'danger' }}"&gt;{{ Auth::user()-&gt;reputation }}
                                  /10&lt;/span&gt;
                          &lt;/center&gt;
                      &lt;/div&gt;
                      &lt;div class="dropdown-item"&gt;
                          &lt;center&gt;В сървъра ли си?: &lt;b&gt;{{ Auth::user()-&gt;isLogged == 1 ? 'Да' : 'Не' }}&lt;/b&gt;&lt;/center&gt;
                      &lt;/div&gt;
                      &lt;hr/&gt;
                      &lt;a class="dropdown-item" href="{{ url('/account/password') }}"&gt;
                          Смени парола
                      &lt;/a&gt;
                      &lt;a class="dropdown-item" href="#"&gt;
                          Нотификаций: &lt;span class="badge badge-danger"&gt;5&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="dropdown-item" href="#"&gt;
                          ични съобщения: &lt;span class="badge badge-danger"&gt;5&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="dropdown-item" href="{{ url('/logout') }}"&gt;
                          &lt;center&gt;Излез&lt;/center&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          @endif
          &lt;div class="side"&gt;
  
              &lt;h5 class="boxes-title"&gt;Навигация &lt;b class="fa fa-compass"&gt;&lt;/b&gt;&lt;/h5&gt;
  
              &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;a href="{{ url('/') }}" class="{{ request()-&gt;is('/') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-home"&gt;&lt;/b&gt;
                          Начало&lt;/a&gt;
                      &lt;br&gt;
                      &lt;a href="{{ url('/shop') }}" class="{{ request()-&gt;is('shop') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-shopping-cart"&gt;&lt;/b&gt; Магазин&lt;/a&gt;
                      &lt;br&gt;
                      &lt;a href="{{ url('/bans') }}" class="{{ request()-&gt;is('bans') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-gavel"&gt;&lt;/b&gt; Банлист&lt;/a&gt;
                      &lt;br&gt;
                      &lt;a href="{{ url('/support') }}" class="{{ request()-&gt;is('support') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-question"&gt;&lt;/b&gt; Поддръжка&lt;/a&gt;
                      &lt;br&gt;
                      &lt;a href="{{ url('/apply') }}" class="{{ request()-&gt;is('apply') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-file-o"&gt;&lt;/b&gt; Кандидатури&lt;/a&gt;
                      &lt;br&gt;
                      &lt;a href="{{ url('/top-voters') }}" class="{{ request()-&gt;is('top-voters') ? 'active' : '' }}"&gt;&lt;b
                              class="fa fa-thumbs-up"&gt;&lt;/b&gt; Топ гласуващи&lt;/a&gt;
                      &lt;br&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="side"&gt;
              &lt;iframe style="width: 300px;"
                      src="https://discordapp.com/widget?id=511173991168344069&amp;theme=dark" width="350" height="500"
                      allowtransparency="true" frameborder="0"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="{{ asset('js/particles.min.js') }}"&gt;&lt;/script&gt;
  &lt;script src="{{ asset('js/ptcls.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="{{ asset('js/application.js') }}"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My css file:</p>
  
  <pre><code>body {
      font-family: 'Oswald', sans-serif;
      background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  a {
      color: rgba(0, 0, 0, 0.77);
  }
  
  a:hover {
      color: #ffbd13;
  }
  
  .servername {
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 100px;
      display: flex;
      margin-top: 40px;
      justify-content: center;
  }
  
  .ip {
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      margin-bottom: 50px;
      justify-content: center;
  }
  
  #to-copy:hover {
      cursor: pointer;
  }
  
  #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      top: 0px;
      z-index: -1;
      left: 0px;
      background-image: url('');
      background-position: 50% 50%;
      background-repeat: no-repeat;
  }
  
  .content-box {
      border-radius: 25px;
      border: 2px solid;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      max-width: 80rem;
      margin: 0 auto;
      background: white;
      margin-bottom: 20rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  .active {
      color: #ffbd13;
  }
  
  .news-box {
      background-color: lightgrey;
      width: 90%;
      padding: 15px;
      margin: 30px;
  }
  
  .maincontent-box {
      background-color: lightgrey;
      width: 90%;
      padding: 15px;
      margin-top: 6.6rem;
      margin-left: 30px;
      margin-bottom: 30px;
  }
  
  
  .boxes-title {
      padding-bottom: 5px;
  }
  
  .sidebar {
      width: 90%; /*Changed*/
      bottom: 520px;
      margin: 30px;
  }
  
  .side {
      padding: 15px;
      bottom: 520px;
      margin-bottom: 10px;
      background-color: lightgrey;
  }
  
  @media only screen and (min-width: 768px) {
      .sidebar {
          width: 30%;
      }
  
      .news-box {
          width: 100%;
      }
  
      .maincontent-box {
          width: 100%;
      }
  
      .content-box {
          flex-direction: row;
      }
  }
  
  .userPane {
      margin-bottom: 30px;
      top: 0;
      color: white;
      right: 0;
      width: 80%;
      justify-content: center;
  }
  
  @media only screen and (min-width: 768px) {
      .userPane {
          width: 90%;
      }
  }
  </code></pre>
  
  <p>Please help me guys.. im trying to make it maybe 30 minutes without succedd! Thanks in advice!</p>