Почему блок не становится в ряд?

Question

Подскажите пожалуйста, почему вот блок с номерами не становится в ряд? Правильно ли у меня написан код по методологии БЭМ? Можно ли использовать что-то типа своего фреймворка, а именно, заготовленые фразы по типу флекса и т.д?

Картинка, что сейчас у меня:

HTML-код

<header class="header"> 
        <div class="header-contact"> 
            <div class="container"> 
                <div class="header-contact__numbers"> 
                    <ul class="numbers__list flex items-center"> 
                        <li class="numbers__item numbers-item"> 
                            <a href="#" class="number-item__link"> 
                                <i class="material-icons-outlined">call</i> 
                                +380 (44) 299 70 60 
                            </a> 
                        </li> 
                        <li class="number__item numbers-item"> 
                            <a href="#" class="number-item__link">+380 (93) 002 11 33</a> 
                        </li> 
                    </ul> 
                </div> 
                <div class="header-contact__button"></div> 
                <div class="header-contact__socials"></div> 
            </div> 
        </div> 
        <nav class="header-nav"></nav> 
    </header>

Answer 1

А тебе точно нужно столько дивов для такого блока?

Делай блок если элемент будет переиспользоваться где нибудь еще. Делай элемент если не будет переиспользоваться.

<header class="header container"> 
  <div class="header-contact"> 
    <div class="block-numbers"> 
      <ul class="block-numbers__list"> 
          <li class="block-numbers__item-top"> 
              <a href="#0"> 
                  <span>call</span> 
                  +380 (44) 299 70 60 
              </a> 
          </li> 
          <li class="block-numbers__item-bottom"> 
              <a href="#0">+380 (93) 002 11 33</a> 
          </li> 
      </ul>
      <a href="#0" class="main-btn">click me</a> 
      <div class="block-socials">
        <div class="block-socials__vk"></div>
        <div class="block-socials__ok"></div>
      </div>  
  </div>

  <nav class="nav">
    <ul class="nav__wrapper">
      <li class="nav__item">menu</li>
      <li>info</li>
    </ul>
  </nav> 
</header>

Answer 2

Встало дружно в ряд:

.header {
  background-color: lightgrey;
  padding: 20px;
}

.numbers__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 344px;
}

.material-icons {
  width: 24px;
  font-size: 14px;
  color: blue;
  margin-right: 5px;
}

.numbers__item {
  display: flex;
  margin-right: 15px;
}

.number-item__link {
  display: block;
  height: 50px;
  text-decoration: none;
  color: blue;
}

.number-item__link:hover {
  text-decoration: underline;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<header class="header">
  <div class="header-contact">
    <div class="container">
      <div class="header-contact__numbers">
        <ul class="numbers__list flex items-center">
          <li class="numbers__item numbers-item">
            <i class="material-icons">call_outline</i>
            <a href="#" class="number-item__link"> 
                                
                                +380 (44) 299 70 60 
                            </a>
          </li>
          <li class="number__item numbers-item">
            <a href="#" class="number-item__link">+380 (93) 002 11 33</a>
          </li>
        </ul>
      </div>
      <div class="header-contact__button"></div>
      <div class="header-contact__socials"></div>
    </div>
  </div>
  <nav class="header-nav"></nav>
</header>

БЛОГ НА HUSL

Почему блок не становится в ряд?

Ответы (2 шт):