How to handle spaces in flexbox navbar - html

Question

I'm trying to copy a navbar design. This is the design I want:
And this is the navbar I'm getting:
And this is the figma link of the design: Link
I'm using flexbox and justify-content: space-between. But I'm getting extra spaces that i do not want. Other differences like icons doesn't matter i just need the basic copy of the ui and get rid of those spaces.
This is my code at the moment:
React Navbar.js:
const Navbar = () => {
return (
<nav className={styles.navbar}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navLinks}>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
SCSS:
.navbar {
width: 100vw;
background: $white;
display: flex;
justify-content: space-between;
align-items: center;
color: $base-text-color;
font-size: $text-md;
line-height: 11px;
}
.navLinks {
display: flex;
justify-content: center;
align-items: center;
border-right: $gray-border;
text-align: center;
}
.logoWrapper {
border-right: $gray-border;
}
.logo {
width: 46px;
height: 46px;
margin: 17px 44px 17px 40px;
}
.navItemWrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 18px 20px;
}
.navItem {
text-decoration: none;
color: $base-text-color;
margin-top: 10px;
}
.searchBarWrapper {
border-right: $gray-border;
// width: 367px;
}
.searchBar {
border: none;
font-size: $text-lg;
font-weight: 300;
padding: 30px;
}
.profileOwner {
display: flex;
justify-content: space-between;
align-items: center;
}
.navAvatar {
width: 42px;
height: 42px;
border-radius: 50%;
margin: 15px;
}
.navProfileName {
display: inline-block;
padding: 10px;
}
.navProfileNameSpan {
font-weight: 300;
}
.navProfileViewCount {
font-weight: 300;
padding: 10px;
}
.navSubmenu {
text-align: center;
border-right: $gray-border;
border-left: $gray-border;
margin-right: 40px;
padding: 18px 23px;
}
.navSubmenuTitle {
margin-top: 21px;
}

Answer 1

Just put the logo div and the Feed , Network div in one container and give some margin-left , you should be good to go.
const Navbar = () => {
return (
<div className={styles.navLinks}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};