Why isnt my navbar expanding right?

Question

So here is the code for my navbar (i use Django, so the links are dynamic) Well, my navbar doesn't expand to the end(if you use the hamburger), and i don't want to insert a fixed number because it doesn't work.

Well, i want the expanded navbar to show login.

alternatively i want to keep the login but put it to the other side.

body {
  font: 14px -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

.bild {
  max-height: 600;
}

.bild img {
  min-width: 20%;
  max-width: 90%;
  height: auto;
  position: relative;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-brand {
  padding-top: 40px;
}

.username a {
  color: #000000;
}

.username a:hover {
  text-decoration: none;
  color: #6f737a;
}

a.logo {
  height: 40px;
  width: 60px;
  background: url(../img/Weramemesicon2.png) 50% no-repeat;
  background-size: 50px 40px;
  text-indent: -9999px;
}

.navbar-collapse.in {
  overflow: hidden;
  max-height: none !important;
  height: auto !important;
}

.top-nav {
  border-radius: 0px;
  background: #000000;
  margin: 0;
}

.navbar a {
  text-align: center;
  font-weight: 700;
}

.navbar a:hover,
navbar a:focus {
  color: #fff;
}

.general-function .search {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  overflow: hidden;
  background: url(../img/sprite.png) 0 0 no-repeat;
  background-size: 420px 120px;
  float: left;
}

.title {
  font-size: 36px;
  margin: 30px 0px;
}

.general-function {
  padding: 10px;
  list-style-type: none;
}

.function-wrap {
  position: absolute;
  right: 0;
  top: 0;
}

.search.selected,
.search:hover {
  background: url(../img/sprite.png) 0 -30px no-repeat;
  background-size: 420px 120px;
}

.visitor-function {
  padding: 9px 10px;
  float: right;
  display: inline-block;
  color: #bbb;
  line-height: 30px;
  height: 30px;
  padding: 0 12px;
  text-decoration: none;
}

.visitor-function li {
  padding: 9px 10px;
  float: right;
  display: inline-block;
  color: #bbb;
  line-height: 30px;
  height: 30px;
  padding: 0 12px;
}

.user-function .btn-mute,
.visitor-function .btn-mute {
  display: inline-block;
  color: #bbb;
  line-height: 30px;
  height: 30px;
  padding: 0 12px;
  text-decoration: none;
  margin-top: 0;
}

.user-function .btn-primary,
.visitor-function .btn-primary {
  color: #fff;
  display: inline-block;
  line-height: 30px;
  height: 30px;
  padding: 0 16px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 700;
  margin-left: 10px;
  text-decoration: none;
}

@media ( max-width: 767px) {
  .navbar.navbar-custom .navbar-nav {
    text-align: center;
  }
  .navbar.navbar-custom .navbar-nav>li {
    font-size: 32px;
  }
  .navbar .navbar-custom .navbar-nav>li:not (:first-child) {
    right: 90 px;
  }
  .navbar.navbar-custom .navbar-nav>li {
    border-bottom: 1px solid #eee;
  }
  .navbar.navbar-custom a.btn.navbar-btn.btn-sign {
    padding: 7.5px 15px;
    font-size: 20px;
  }
  .navbar.navbar-custom .signin {
    float: none;
    clear: both;
    position: relative;
    right: 0;
  }
}

.twitter {
  padding: 4px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  background: #3b5998 url(../img/Sprites.png) -1.4px -2px no-repeat;
  background-size: 320px 30px;
  border-radius: 50%;
}

.twitter:hover {
  padding: 4px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  background: #3b5998 url(../img/Sprites.png) 1.4px 1.4px no-repeat;
  background-size: 320px 30px;
  border-radius: 50%;
}

.facebook {
  padding: 4px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  background: #3b5998 url(../img/Sprites.png) -30.2px -2px no-repeat;
  background-size: 320px 30px;
  border-radius: 50%;
}

.facebook:hover {
  padding: 4px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-indent: -999px;
  background: #3b5998 url(../img/Sprites.png) -27.9px 1.4px no-repeat;
  background-size: 320px 30px;
  border-radius: 50%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<title>Testingsite </title>

<body>
  <header>
    <nav class="navbar top-nav  navbar-top navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="logo navbar-brand" href="{% url 'home' %}">Wera</a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navi" aria-expanded="false">	<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
        </div>
        <div class="collapse navbar-collapse" id="navi">
          <ul class="nav navbar-nav custom-nav">
            <li><a href="#"> Hot </a></li>
            <li><a href="#"> Trending </a></li>
            <li><a href="{% url 'posts:all' %}"> Fresh </a></li>
            <li><a href="{% url 'groups:all' %}"> Groups	</a></li>
          </ul>
          <div class="visitor-function row">
            <ul class="navbar navbar-nav custom-nav general-function navbar-right">
              <a href="#" class="search">search</a>
              <a class="btn-mute " href=" {% url 'accounts:login' %} ">Login</a>
              <a class="btn-primary " href=" {% url 'accounts:signup' %}">Sign up</a>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div class="container">

  </div>
</body>

Answer 1

Try this:

@media (max-width: 768px) {
.visitor-function {
    height: auto;
}
}