Непонятное поведение margin

margin-top:0.7% в селекторе .info i:nth-child(3) не смещает символ телефона, а именно <i class="icon-mobile-1"></i>. Я думал, что это схлопывание с

.info
  {
    margin-top: 0.5%;
  }

и потому неоднократно пробовал менять значения, ведь при схлопывании выбирается наибольшее из двух значений, однако смещения не происходило. Так же я поменял селектор, чтобы не было проблем с приоритетом идентификатора над классом. По итогу я не понимаю, в чём конкретно проблема, и хочу разобраться как это работает.

CSS:

@media (min-width: 1200px) and (max-width: 1920px)
{
  header /*Цвет заднего фона и нижняя граница шапки*/
  {
    background-color: #f5f7fa;
    border-bottom: 1px solid #e6e9ed;
    font-size: 72%;
    padding-bottom: 1.08%;
    /*padding: 0.8em 0.3em 0.3em 0.3em;*/
  }

  .info
  {
    margin-top: 0.5%;
  }

  header * /*Значение полей вокруг элементов шапки, также неразрывность всех элементов, в частности номера телефона, чтобы не переносился на новую строку.*/
  {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    color: #566f89;
  }

  #info i:nth-child(1) /*Размер иконки почты в шапке и сдвиг*/
  {
    font-size: 0.96em;
    margin-left: 40.8%;
  }

  header a:nth-child(2) /*Сдвигаем почтовый адрес в шапке*/
  {
    color: #566f89;
    margin-left: 0.3%;
  }

  header a:hover /*Поменять цвет ссылок шапки при наведении курсора*/
  {
    color: #00bc9c;
  }

  .info i:nth-child(3) /*Размер иконки телефона в шапке и сдвиг*/
  {
    font-size: 1.6em;
    margin-left: 1.9%;
    margin-top: 0.7%;
  } 

HTML:

<header class="grid-x grid-margin-x"> <!-- Шапка -->

        <div class="cell small-6 info" id="info"> <!-- e-mail и номер телефона со значками -->
          <!--<i class="fi-mail"></i> -->
          <i class="icon-mail-1"></i>
          <a href="[email protected]" title="Contact mail">
            [email protected]
          </a>
          <i class="icon-mobile-1"></i> <span>+00 (123) 456 78 90</span>
        </div>

        <div class="cell auto" id="social-symbols"> <!-- значки соц сетей -->
          <a href="https://dribbble.com"> <i class="icon-dribbble"></i> </a>
          <a href="https://www.behance.net"> <i class="icon-behance"></i> </a>
          <a href="https://www.pinterest.ru"> <i class="icon-pinterest"></i> </a>
          <a href="https://twitter.com"> <i class="icon-twitter"></i> </a>
          <a href="https://plus.google.com"> <i class="icon-gplus"></i> </a>
          <a href="https://www.facebook.com"> <i class="icon-facebook"></i> </a>
        </div>

    </header>