I am a total beginner in coding & try to create a webpage for a student project, using React.

I have a problem while creating the navbar for the page. How do I position the items (Home, Project, Team, Kontakt) to the right side of the bar?

This is what it currently looks like:[1]: <https://i.stack.imgur.com/gUJPi.png>

Here is the code I am currently using:

```
   const navbar = props => (
            <nav className="navbar">
                <div className="container" >
                    <div className="navbar__bubble">
                        <IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
                    </div>
                    <div className="navbar__title">
                        <h2>Our project</h2>

                    </div>
                    <div className="navbar__navigation-items">
                        <ul>
                            <li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
                            <li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
                            <li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
                            <li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
                        </ul>
                    </div>
                </div>

            </nav>       
    );

```

& scss code for the container and the navbar:

```
.container {
    max-width: 115rem;
    margin: 0 10rem;
    padding: 0 $m-size;
    display: flex;
}

```

and

```
.navbar {
    background: #E3E9EE;
    position: fixed; 
    width: 100%;
    top: 0;
    padding: .7rem 0;
    height: 80px;
    display: flex;
    border-bottom: 1px solid lighten(#2C465F, 30%);
}

.navbar__bubble {
    color: #2C465F;
    cursor: pointer;
    margin-top: 20px;
}

.navbar__title {
    color: #2C465F;
    cursor: pointer;
    margin: 30px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: $m-size;
}

.navbar__navigation-items {
    margin-top: 30px;
    font-size: $m-size;
}

.navbar__navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px; 
    list-style: none;
    float: right;
}

.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
    color: #2C465F;
}

.navbar__subtitle {
    margin-top: 28px;
}

```

Thanks in advance for your help! :) (