I am currently using flexbox to align the h1 and nav on the same line with display:flex. I want the title to be centered and the navigation to be on the right side. However, I am struggling to figure out how to move the navigation all the way to the right. I have tried using margin-right:auto on the h1 and searched for a property similar to align-self for the main axis when it's set to row, but I can't seem to find a solution. Initially, I used justify-content:center but eventually changed it back to space-between.
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<header className='header--container'>
<Link to='/'>
<h1 className='header--title'>Cocktail Connaisseur</h1>
</Link>
<Link to='/cocktails/a'>
<nav className='header--nav'>
<p>All Cocktails</p>
</nav>
</Link>
</header>
);
};
export default Header;
index.css
/*Header Styling */
.header--container {
background-color: #55505c;
padding: 15px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: space-between;
}
.header--container>a {
text-decoration: none;
}
.header--title {
margin: 0;
color: #e8e9f3;
font-size: 1.5em;
text-align: center;
}
.header--nav {
align-self: flex-end;
margin-left: auto;
}
.header--nav>p {
margin: 0;
color: #e8e9f3;
}