Hey there, I need some help with my header component and search bar. Here is the code for my header:
import React from 'react';
import './style.css';
import SearchBar from './SearchBar';
import logo from '../../assets/logo.png';
export default function Header() {
return (
<>
<div className="header-top"></div>
<div className="header">
<img className="header__logo" src={logo} />
<SearchBar />
</div>
</>
);
}
And here is the search bar component that is imported in the Header:
import React from 'react';
export default function SearchBar() {
return (
<div className="search-form-container">
<form className="search-form">
<input
type="text"
className="search-form__input"
placeholder="Search for brands or products..."
></input>
</form>
</div>
);
}
Here is the CSS used for styling:
.header-top {
width: 100%;
height: 30px;
background: black;
color: white;
font-weight: bold;
}
.header {
width: 100%;
background: white;
height: 60px;
box-shadow: 0px 11px 13px -9px rgba(141, 141, 141, 0.75);
display: flex;
align-items: center;
}
.header__logo {
height: 20px;
padding-right: 100px;
object-fit: contain;
}
.search-form__input {
width: 700px;
height: 45px;
border: none;
background: #f6f6f6;
padding-left: 20px;
color: black;
border-radius: 5px;
}
The current layout looks like this :
https://i.sstatic.net/AUCAJ.png
I'm looking to center the searchbar inside the header while keeping the logo separate on the right side. When I add justify-content:center, it centers everything including the logo. How can I achieve the desired result? Thanks for your help!