我试图找出如何让我的导航栏链接对齐到右边，并大致在同一行的标志，这是在左上角，但我很努力。
这是我在导航栏和logo中使用的CSS。代码下面的图片显示了它的外观。我试过改变各种东西都无济于事。

<div class="logo">
            <img src="images/rl logo with text.png">
        </div>
        <div class="container">
            <div class="navbar">
                <div class="header">
                    <ul class="menu">
                        <li><a class="bar-link" href="index.html">Home</a></li>
                        <li><a class="bar-link" href="./#about">About</a></li>
                        <li><a class="bar-link" href="./#projects">Projects</a></li>
                        <li><a class="bar-link" href="./#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
}

.navbar {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header {
    width: 100%;
    height: 60px;
}

.menu {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: right;
    list-style: none;
}

.menu li {
    display: inline-flex;
    position: relative;
    height: 100%;
    font-family: 'Crimson Text', serif;
    font-size: 28px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    color: black;
    text-shadow: 5px 5px 5px;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165. 1);
    text-align: center;
    padding: 0 10px;
    margin-right: 30px;
}

.menu li:after, .menu li:before {
    content: "";
    position: absolute;
    display: block;
    border: 0px solid transparent;
}

.menu li:after {
    width: 0%;
    height: 80%;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transition: all 0.3s ease;
}

.menu li:before {
    width: 120%;
    height: 0%;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    transition: all 0.5s ease;
}

.menu li:hover::before {
    height: 80%;
}

.menu li:hover::after {
    width: 120%;
}

.bar-link {
    text-decoration: none;
    color: black;
}

.logo {
    margin-top: -30px;
}

Page Image