Navigation not taking full browser size

is the following, I noticed now an error that my site has, is the following, I set the max-width of the page to 1366px, if I zoom out in the browser all elements occupy the full width of the browser. But it turns out that my navbar, with width 100%, is only up to 1366px, was not supposed to occupy the width of the total screen as well as the other items?

Another error is that when zooming in and zooming out the navbar logo does not accompany the navbar, it simply increases the size or decreases disproportionately to the navbar.

HTML:

<nav>
        <div class="row">    
            <img class="logo" src="img/logo.png" alt="logo">
          <ul class="menu menu-js">
            <li><a href="#about_us"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>
            <li><a href="#search"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>
            <li><a href="#top_artists"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>
            <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>
            <li><a href="#contacts"><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a><ul class="sub-menu">
                <li><a href="#">LOGIN</a></li>
                <li><a href="#">REGISTER</a></li>
                </ul>
                </li>
          </ul> 
        </div>
        </nav>

CSS:

.menu,
.menu > li {
    margin: 0;
    padding: 0;
}

.menu {
    background-color: #fff;
    width: 100%;
    /* impede que os menus quebrem */
    text-align: center;
}

.logo {
    position: absolute;
    top: 0.6%;
    transform: translateY(-5%);
    float:  left;
    width: 14%;
    height: auto;
    overflow: hidden;
    margin-left: 5%;
}

.menu {
    text-align: right;
    padding: 0;
}

.menu > li {
    background-color: #fff;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: center;
}

.menu > li:last-child {
    margin-right: 5%;
}

.menu>li>a {
    font-size: 75%;
    font-weight: bold;
    padding: 15px 0;
    color: #74C8D2;
    text-decoration: none;
    display: block;
}

.menu>li>a:hover {
    color: #fff;
    background-color: #74C8D2;
    transition: all .5s ease-in-out;
}

.menu>li>a::after,
.menu>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu>li>a::after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a::before {
    top: -5px;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a:hover::after,
.menu>ul>li>a:hover::before {
    opacity: 1;
}

.menu>li>a>i {
    vertical-align: middle;
}



/* submenu */

.sub-menu {
    width: 100%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease-in-out;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}


.sub-menu li {
    display: block;
    font-size: 75%;
    text-align: center;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    color: #74C8D2;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
    background: #74C8D2;
    color: #fff;
    transition: .5s ease-in-out;
}