I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this link: https://i.stack.imgur.com/NhKK7.png
I have experimented with including: margin-bottom: 30px, but unfortunately, that did not produce the desired result:
Below is a snippet of my React code:
return (
<>
<div className='home-bar'>
<div className="home-bar-links">
<p>Mathly</p>
</div>
</div>
</>
);
And here is an overview of my CSS styling applied:
.home {
position: relative;
width: 100%;
min-height: 100px;
}
.home-bar {
margin-top: 0;
padding: 1rem;
height: 7vh;
position: sticky;
display: flex;
flex-direction: row-reverse;
background-color: #D9B99B;
border-bottom-left-radius: 30%;
overflow: hidden;
}
.home-bar-links {
display: inline-block;
font-weight: 600;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5rem;
margin-bottom: 150px;
}