Styling Navigation bar with logo and button - html

Question

I have been trying for hours to style my navigation bar(which is horizontal at the top of the screen) so that my logo will show at left , menu on the center and the username with the logout button at right(all of them horizontally).I tried float ,position display, but nothing seems to work as i want.Instead the result is all the elements(logo,menu,username,logout button) to appear in the center.Any help would be appreciated.
HTML code
<header>
<div class="page">
<nav class="page__menu page__custom-settings menu">
<div class="logo">
<img src="images/logo.png">
</div>
<ul class="menu__list r-list">
<li class="menu__group">Main</li>
<li class="menu__group">Songs</li>
<li class="menu__group">Ratings</li>
</ul>
<section id="login">
Logout
<h1>User: <?php echo $user_data['user_name']; ?></h1>
</section>
</nav>
</header>
CSS code
.r-link{
display: var(--rLinkDisplay, inline-flex) !important;
}
.r-link[href]{
color: var(--rLinkColor) !important;
text-decoration: var(--rLinkTextDecoration, none) !important;
}
.r-list{
padding-right: var(--rListPaddingRight, 0) !important;
margin-top: var(--rListMarginTop, 0) !important;
margin-bottom: var(--rListMarginBottom, 0) !important;
margin-left: var(--rListMarginLeft, 0) !important;
list-style: var(--rListListStyle, none) !important;
}
.menu{
--rLinkColor: var(--menuLinkColor, currentColor);
display: flex;
justify-content: center;
}
.menu__link{
display: var(--menuLinkDisplay, block);
}
.menu__link:focus{
outline: var(--menuLinkOutlineWidth, 2px) solid var(--menuLinkOutlineColor, currentColor);
outline-offset: var(--menuLinkOutlineOffset);
}
.menu__link:hover{
--rLinkColor: #e8491d; ;
}
.menu{
background-color: var(--menuBackgroundColor, #f0f0f0);
box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}
.menu__list{
display : flex;
}
.page__menu img{
float: left;
position: relative;
margin: 10px 15px 15px 10px;
display: block;
width: 450px;
max-width:100% ;
height: auto;
margin: auto;
}
.menu__link{
padding: var(--menuLinkPadding, 1.5rem 2.5rem);
font-weight: 700;
text-transform: uppercase;
}
.text-underlined{
position: relative;
overflow: hidden;
will-change: color;
transition: color .25s ease-out;
}
.text-underlined::before,
.text-underlined::after{
content: "";
width: 0;
height: 3px;
background-color: var(--textUnderlinedLineColor, currentColor);
will-change: width;
transition: width .1s ease-out;
position: absolute;
bottom: 0;
}
.text-underlined::before{
left: 50%;
transform: translateX(-50%);
}
.text-underlined::after{
right: 50%;
transform: translateX(50%);
}
.text-underlined:hover::before,
.text-underlined:hover::after{
width: 100%;
transition-duration: .2s;
}
.page__custom-settings{
--menuBackgroundColor: #255785;
--menuLinkColor: #fff;
--menuLinkColorUnactive: #241c69;
--menuLinkOutlineOffset: -.5rem;
}
.button {
background-color: #e8491d;
color: white;
padding: 10px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 7px;
transition-duration: 0.4s;
cursor: pointer;
float : right;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
text-align: right;
font-size: 14px;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
color: white;
padding: 20px;
}

Answer 1

Here is the result what I fixed, please check and let me know.
You need to change justify-content: space-between instead center to the menu and add align-items: center and align-items: center to the #login.
Added the fixed css code.
Hope it is helpful~
.r-link {
display: var(--rLinkDisplay, inline-flex) !important;
}
.r-link[href] {
color: var(--rLinkColor) !important;
text-decoration: var(--rLinkTextDecoration, none) !important;
}
.r-list {
padding-right: var(--rListPaddingRight, 0) !important;
margin-top: var(--rListMarginTop, 0) !important;
margin-bottom: var(--rListMarginBottom, 0) !important;
margin-left: var(--rListMarginLeft, 0) !important;
list-style: var(--rListListStyle, none) !important;
}
.menu {
--rLinkColor: var(--menuLinkColor, currentColor);
display: flex;
justify-content: space-between;
align-items: center;
}
.menu__link {
display: var(--menuLinkDisplay, block);
}
.menu__link:focus {
outline: var(--menuLinkOutlineWidth, 2px) solid var(--menuLinkOutlineColor, currentColor);
outline-offset: var(--menuLinkOutlineOffset);
}
.menu__link:hover {
--rLinkColor: #e8491d;
}
.menu {
background-color: var(--menuBackgroundColor, #f0f0f0);
box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}
.menu__list {
display: flex;
padding-left: 0;
}
.page__menu img {
float: left;
position: relative;
margin: 10px 15px 15px 10px;
display: block;
width: 450px;
max-width: 100%;
height: auto;
margin: auto;
}
#login {
display: flex;
align-items: center;
}
.menu__link {
padding: var(--menuLinkPadding, 1.5rem 2.5rem);
font-weight: 700;
text-transform: uppercase;
}
.text-underlined {
position: relative;
overflow: hidden;
will-change: color;
transition: color .25s ease-out;
}
.text-underlined::before,
.text-underlined::after {
content: "";
width: 0;
height: 3px;
background-color: var(--textUnderlinedLineColor, currentColor);
will-change: width;
transition: width .1s ease-out;
position: absolute;
bottom: 0;
}
.text-underlined::before {
left: 50%;
transform: translateX(-50%);
}
.text-underlined::after {
right: 50%;
transform: translateX(50%);
}
.text-underlined:hover::before,
.text-underlined:hover::after {
width: 100%;
transition-duration: .2s;
}
.page__custom-settings {
--menuBackgroundColor: #255785;
--menuLinkColor: #fff;
--menuLinkColorUnactive: #241c69;
--menuLinkOutlineOffset: -.5rem;
}
.button {
background-color: #e8491d;
color: white;
padding: 10px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 7px;
transition-duration: 0.4s;
cursor: pointer;
float: right;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
text-align: right;
font-size: 14px;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
color: white;
padding: 20px;
}