Меню на весь экран

 <div class="navbar">
            <div class="navbar-inner main-container">
                <a class="brand" href="#"><img src="img/logo-text.svg" alt=""></a>
                <ul class="nav">
                    <li class="menu-li active hidden-sm hidden-xs">
                        <ul class="menu">
                            <li class="active"><a href="">Sign Up</a></li>
                            <li class=""><a href="">Sign In</a></li>
                        </ul>
                    </li>
                    <li class="hidden-md hidden-lg" id="mobile-menu-but">
                        <span class="hamburger"></span>
                        <span class="hamburger"></span>
                        <span class="hamburger"></span>
                    </li>
                </ul>
            </div>
        </div>

Имеется вот такое меню. Мне нужно что бы в мобильной версии элемент:

<ul class="menu">
                  <li class="active"><a href="">Sign Up</a></li>
                  <li class=""><a href="">Sign In</a></li>
</ul>

Был полностью на весь экран. Для это я следующим элементам:menu-li, nav, navbar-inner, navbar в мобильной версии прописываю position: static, всё получается и menu освобождается, но происходит глюк, тк все элементы в элементе nav так же вылазят за родителя. Как это можно решить, или подскажите библиотеку которая бы это решила. Спасибо!

.navbar {
  border-bottom: 2px solid @red1;
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: #ffffff;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  margin: 0;
  z-index: 50;
}
.navbar-inner {
  position: relative;
}
.main-container {
  max-width: 1225px;
  position: relative;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px;
}
.container-content {
  max-width: 660px;
  margin: 0 auto;
  padding-top: 49px;
  padding-bottom: 100px;
}
.full-width {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.full-width-bg {
  //height: 100%;
  background-image: url('../img/signup-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 132px;
  padding-bottom: 144px;
}
.full-width-bg-merch {
  padding-top: 91px;
  padding-bottom: 51px;
}
.brand {
  display: inline-block;
  padding-top: 14px;
  padding-bottom: 18px;
}
.footer-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.brand img {
  width: 100px;
  height: 50px;
  display: inline-block;
}
.nav {
  position: absolute;
  right: 50px;
  top: 0;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.nav > li > a:hover {
  background-color: transparent;
}
.nav > li {
  color: @red1;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 800;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.nav > li a {
  padding-left: 32px;
  padding-right: 32px;
}
.hamburger {
  background-color: @red1;
  height: 4px;
  width: 35px;
  margin-bottom: 5px;
}
.nav > #mobile-menu-but {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-left: 1px solid @border1;
  padding-left: 25px;
  padding-right: 0;
  cursor: pointer;
}
.menu {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  li {
    display: inline-block;
    height: 100%;
  }
  a {
    display: block;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
.menu .active {
  color: #fff;
  background-color: @red1;
}