<div class="row">
        <nav class="main-nav nav-js">
        <img class="logo" src="" alt="">
          <ul>
            <li><a href="#about_us">ABOUT US</a></li>
            <li><a href="#search">SEARCH</a></li>
            <li><a href="#top_artists">TOP ARTISTS</a></li>
            <li><a href="#contacts">CONTACTS</a></li>
          </ul>
        </nav>
        </div>

.main-nav {
    background-color: #2c3136;
    width: 100%;
    height: 70px;
    text-align: center;
    box-shadow: 0 0 5 0 #000;
      }

.main-nav  li{
    display: inline;
    list-style: none;
      }

.main-nav li a {
    text-decoration: none;
    color: white;
    margin-right: 50px;
    font-size: 90%;
    font-weight:  bold;
      }

.main-nav li a:link
.main-nav li a:visited {
    padding: 8 0;
    color: #fff;
    background: transparent;
    transition: background 0.3s ease-in-out;
}


.main-nav li a:hover,
.main-nav li a:active {
    color: #fff;
    background: #5a5a5a;
    transition: background 0.3s ease-in-out;
}