Почему мой размер изменяется?

Question

Мой заголовок структурирован как таблица. Наконец, мне удалось сделать так, чтобы последний li был перемещен вправо, а X% влево, все еще совместимый с разными размерами экрана. Тем не менее, мой профиль «profile picture» изменяет размер и напоминает скрипучий круг. Как я могу убедиться, что div всегда 40 пикселей по ширине и высоте (если это правильный способ обойти его)?

CSS

#hdr-profile { 
    align-items: center; 
    border: 1px dotted red; 
    display: flex; 
    margin-left: auto; 
    white-space: nowrap; 
} 

#hdr-profile-pic { 
    width: 40px; 
    height: 40px; 
    background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat; 
    background-size: 100% 100%; 
    border-radius: 50%; 
    cursor: pointer; 
} 

HTML

<li> 
     <div id="hdr-profile"> 
      <div id="hdr-profile-pic" title="My Profile"> 
       <div id="hdr-profile-country" title="Liam is in Spain"></div> 
      </div> 
      <span id="hdr-profile-name" class="select"><a href="#">Liam Macmillan</a></span> 
      <i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i> 
     </div> 
    </li> 

Answer 1

Простой способ будет добавить! Важно после 40px в вашем CSS профильного изображения

Answer 2

I подозревают, что это из-за размера раскрывающегося списка. В JSFiddle, которую связал Ненад Врачар, картина получается полностью. Не используйте! Важно форсировать размер, это плохая практика и вызывает неожиданное поведение. Вместо этого попробуйте поэкспериментировать с размером выпадающего списка. У меня нет остального кода, или я бы заглянул в него.