CSS Flexbox - Bg-цвет и текст не выравниваются

Question

Пожалуйста, см. Codepen ссылка .

ccs было скомпилировано в scss

Пожалуйста, прокрутите вниз более чем наполовину на странице css, чтобы избежать reset код

Проблема : обе кнопки справа от фона навигации и текста не синхронизированы c по сравнению с левой стороной.

Может кто-нибудь заметит проблему, пожалуйста ?

Открыт для предложений по моему стилю B__E__M

Answer 1

Почему бы просто не поставить цвет фона на родительском?

/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/*````````````````the actual code below`````````````*/


.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: 100px;
  background-color: #ecdfc8;
}

.nav__img {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 10%;
          flex: 1 1 10%;
}

.nav img {
  height: 100px;
  margin: auto;
}

.nav__section {
  -webkit-box-flex: 8;
      -ms-flex: 8 1 90%;
          flex: 8 1 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.nav__ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav__ul--lf {
  width: 50%;
}

.nav__ul--rt {
  width: 15%;
}

.nav__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #df7861;
  border-radius: 5px;
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
  padding: 10px 15px;
   
}

.nav a {
  color: #111;
  text-decoration: none;
  font-weight: 300;

}

.nav__item:hover {
  background-color: #df7861;
  background-color: #ecdfc8;
}
/*# sourceMappingURL=style.css.map */

<header class="header">
  <nav class="header__nav nav">
    <span class="nav__img b1">
      <img src="./img/plant-logo.png" alt="logo">
    </span>

    <section class="nav__section nav_section--1 b2">
      <ul class="nav__ul nav__ul--lf b3">
        <li class="nav__item">
          <a href="www.google.com">Home</a>
        </li>
        <li class="nav__item">
          <a href="www.google.com">Product</a>
        </li>
        <li class="nav__item">
           <a href="www.google.com">Learn</a>
        </li>
      </ul>
      <ul class="nav__ul nav__ul--rt b4">
         <li class="nav__item">
            <a href="www.google.com">Contact</a>
         </li>
         <li class="nav__item">
            <a href="www.google.com"><span>Sign in</span></a>
         </li>
       </ul>
    </section>
  </nav>
</header>

Answer 2

Удалить дисплей: flex из класса .nav__item

.nav__item {
   display: -webkit-box;
   display: -ms-flexbox;
}

Answer 3

Проблема: li в левой части навигации имеет display: list-item;, но li в правой навигации имеет display: flex;

Увеличьте ширину .nav__ul--rt до 25% и задайте правильное свойство Ли на правой стороне, чтобы выровнять это правильно. Это наблюдение основано на вашем макете.