How to align the header and its components evenly in node js

enter image description here`.header { padding: 15px 20px; display: flex; position: sticky; background-color: white; justify-content: space-between; z-index: 100; top: 0; box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 0.75); }

.header_left { display: flex; justify-content: space-evenly; }

.header_input { display: flex; align-items: center; background-color: #eff2f5; padding: 10px; margin-left: 10px; border-radius: 999px;

}

.header_left > img { height: 40px; }

.header_input { border: none; background-color: transparent; outline-width: 0; }

.header_center { display: flex; flex: 1; justify-content: center; }

.header_option > .MuiSvgIcon-root { color: gray; }

.header_option:hover > .MuiSvgIcon-root { color: #2e81f4; }

.header_option { display: flex; align-items: center; padding: 0 30px; cursor: pointer; }

.header_option:hover { background-color: #eff2f5; border-radius: 10px; align-items: center; padding: 0 30px; border-bottom: none; }

.header_info { display: flex; align-items: center; }

enter code here
.header_info > h4 { margin-left: 10px; }’