I've been encountering some difficulties while attempting to position a search box next to the logo image at the center of the navbar styled section. Strangely, the search box keeps appearing in the right corner of the page instead.
Below is the React code snippet:
const Home = () => {
return (
<>
<header>
<div className='container-fluid'>
<div className='row'>
<div className='sm2'>
<img src={logo} alt=''/>
</div>
<div className='search-box'>
<i><Fas.FaSearch/></i>
<input type='text' placeholder='Hit Enter'/>
</div>
</div>
</div>
</header>
</>
)
}
export default Home
Here is the relevant CSS code that seems to be causing the issue:
header{
width: 100%;
height: 80px;
}
header .row {
width: 100%;
display:flex;
align-items: center;
justify-content: space-between;
background-color: #E6E6FA;
}
img{
width: 20%;
}
.search-box{
width: 100%;
text-align: center;
}
The current result can be seen in this screenshot Evidence big gap
If you have any suggestions on how to properly position the search box in the center of the webpage, I would greatly appreciate it. Thank you!