Как обрабатывать пробелы в панели навигации Flexbox

Question

Я новичок в программировании и пытаюсь скопировать дизайн навигационной панели. Это тот дизайн, который мне нужен: и вот панель навигации, которую я получаю:

И это ссылка на фигма дизайна: Ссылка

Я использую flexbox и justify-content: space-between. Но я получаю лишние места, которые мне не нужны. Другие различия, такие как значки, не имеют значения, мне просто нужна базовая копия пользовательского интерфейса и избавьтесь от этих пробелов.

Это мой код на данный момент:

Реагировать на 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

Просто поместите div с логотипом и Div Feed, Network в один контейнер и добавьте margin-left, вам должно быть хорошо.

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>
  );
};