As said, you can make the header a flexbox container so the logo and nav can share the horizontal space and remove the large margin-left you have added to the ul #nav-bar ul as well which is pushing it.
To get everything to line up you will need to use some more flexbox, give elements a width to make the space distribution work, and remove some default margin and padding on the ul.
Example
header {
background-color: #fadbde;
border-radius: 10%;
box-shadow: 0 10px 10px grey;
height: 8rem;
width: 100%;
position: fixed;
display: flex;
}
#nav-bar {
display: flex;
width: 100%;
}
#nav-bar ul {
list-style: none;
display: flex;
justify-content: space-evenly;
font-size: 18px;
width: 100%;
margin: 0;
padding: 0;
align-items: center;
}
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).