How to make a responsive navbar for screens below 900px

Question

I am a beginner to web design and I have been trying to make the code below responsive for quite some time using the media="(max-width:900px)"tag but I keep coming across problems so please if anyone can help any design style is welcome i just don't want the Nav bar to be all jumbled up when the screen size decreases

HTML

<header>
    <div class="container">
        <a href="">
            <span>KH BRAND NAME.</span>
        </a>
    </div>

    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#About">About Us</a></li>
            <li><a href="#Product">Products</a></li>
            <li><a href="#Contact">contact us</a></li>
        </ul>
    </nav>

</header>

CSS

header {
    z-index: 9999;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    width: 100%;
    height: 10vh;
    transition: 0.5s ease-in;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.container {
    position: relative;
    left: 90px;
    top: 25px;
}

.container a {
    text-transform: uppercase;
    text-decoration: none;
}

.container span {
    color: black;
    font-size: 30px;
    border: 3px solid black;
    border-radius: 10px;
    padding: 10px;
    transition: all .5s ease;
}

nav {
    float: right;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}


.nav-shift {
    background-color: rgba(0, 0, 0, 0.95);
}

.nav-shift nav a {
    color: white;
}

.nav-shift div span {
    border: 3px solid white;
    transition: 0.5s ease-in;
    color: white;
}


nav ul {
    list-style: none;
}

nav li {
    color: black;
    display: block;
    margin-left: 75px;
    padding-top: 23px;
    position: relative;
    padding-bottom: 10px;
}

nav a {
    text-transform: uppercase;
    color: black;
    text-decoration: none;
    font-weight: lighter;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    transition: .1s ease;
}

nav a:hover {
    color: #8f8f8f;
}


.nav-shift nav a::after {
    background-color: white;
}

nav a::after {
    content: '';
    display: block;
    background-color: black;
    height: 4px;
    position: absolute;
    width: 0;
    transition: all ease-in-out .5s;
}


nav a:hover::after {
    width: 100%;
}

Answer 1

The above the answers are all great and correct, but I just wanted to add to them really quickly. Depending on how many links you have in your nav, you MAY want to put them behind a hamburger menu, and use JavaScript/jQuery to active them with an onClick() function.

This will condense everything down for smaller screens and potentially prevent un-readability.

Answer 2

I changed your nav grid to flex and added a few media queries. Its relatively responsive but not sure if this what you're looking for style wise.

header {
        z-index: 9999;
        background-color: rgba(255, 255, 255, 1);
        position: relative;
        width: 100%;
        height: 10vh;
        transition: 0.5s ease-in;
        display: flex;
        justify-content: space-between;
        /*! flex-direction: column; */
        /*! align-items: center; */
    }

    .container {
        position: relative;
        left: 90px;
        top: 25px;
    }

    .container a {
        text-transform: uppercase;
        text-decoration: none;
    }

    .container span {
        color: black;
        font-size: 30px;
        border: 3px solid black;
        border-radius: 10px;
        padding: 10px;
        transition: all .5s ease;
    }

    nav {
        float: right;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        height: 10vh;
        margin-right: calc(100% - 95%);
    }

    nav ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        /*! flex-direction: column; */
    }


    .nav-shift {
        background-color: rgba(0, 0, 0, 0.95);
    }

    .nav-shift nav a {
        color: white;
    }

    .nav-shift div span {
        border: 3px solid white;
        transition: 0.5s ease-in;
        color: white;
    }


    nav ul {
        list-style: none;
    }

    nav li {
        color: black;
        display: block;
        margin-left: 75px;
        padding-top: 23px;
        position: relative;
        padding-bottom: 10px;
    }

    nav a {
        text-transform: uppercase;
        color: black;
        text-decoration: none;
        font-weight: lighter;
        font-family: Helvetica, sans-serif;
        font-size: 20px;
        transition: .1s ease;
    }

    nav a:hover {
        color: #8f8f8f;
    }


    .nav-shift nav a::after {
        background-color: white;
    }

    nav a::after {
        content: '';
        display: block;
        background-color: black;
        height: 4px;
        position: absolute;
        width: 0;
        transition: all ease-in-out .5s;
    }


    nav a:hover::after {
        width: 100%;
    }

    @media screen and (max-width:1150px)
    {
        nav li {
            margin-left: 20px;
        }
    }

    @media screen and (max-width: 900px)
    {
        header {
           flex-direction: column;
           align-items: center
        }
        
        header .container {
            position: static;
            margin-top: 15px
        }
    }
    
    @media screen and (max-width: 550px)
    {
        nav {
            margin-right: 0;
        }
        
        nav ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
        }
        
        nav ul li {
            margin: 0;
        }
    }

Answer 3

This is how I usually do my navigation. And you don't even need to use media queries if you have only a few links in your navigation. But from 480px viewport width and below you might need to consider a mobile menu.

HTML:

<div class="navbar-wrapper">
    <nav class="navbar">
        <div>
            <a href="" class="logo">KH BRAND NAME</a>
        </div>
        <div class="links">
            <a href="">Home</a>
            <a href="">About Us</a>
            <a href="">Products</a>
            <a href="">Contact Us</a>
        </div>
    </nav>
</div>

CSS:

.navbar-wrapper {
    width: 100%;
    background-color: #ddd;
    padding: 1rem 0;
}

.navbar {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
}

.links {
    display: flex;
}

a {
    color: black;
    text-decoration: none;
}

.links a:nth-child(n+2) {
    margin-left: 1rem;
}

Answer 4

You should take a look at media queries

.bloc {
  background-color: blue;
  width: 200px;
  height: 200px;
}

@media screen and (max-width: 900px) {
  .bloc {
    background-color: red;
  }
}

<div class="bloc"></div>