Увеличьте расстояние между img и текстом внутри элемента href (интервал между словами?. padding?)

Question

Я пытаюсь понять, как сделать пробел между текстом и изображением. Я перепробовал все, что узнал до сих пор, включая интервалы между словами, отступы.

Позвольте мне показать вам картину, которая даст вам лучшее понимание того, чего я хочу достичь. Я хочу увеличить пространство между изображением и текстом. Выделено желтым. Как я могу добиться этого, используя этот пример кода? Ссылка на CodePen

HTML

<div class="navbar-header">
  <div class="container">
    <div id="logo">
      <a href="#">
        Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman
      </a>
    </div>
  </div>
</div>

CSS

.navbar-header {
  border-bottom: 1px solid black;
  height: 70px;
  margin-bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

 .container {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

#logo {
  align-items: center;
  margin: auto;
}

#logo a {
  align-items: center;
  color: black;
  display: flex;
  flex-grow: 2;
  margin: auto;
  text-decoration: none;
  word-spacing: 200px;
}

 #logo img {
  height: 66px;
  margin: auto;
}

Answer 1

Я думаю, что предоставление img левого / правого поля должно быть лучшим решением. Самый простой способ сделать это:

#logo img {
  height: 66px;
  margin: auto 20px;
}

Answer 2

Если я понимаю ваш вопрос..... я бы просто добавил левые и правые поля к #logo img о месте, которое вы хотите

#logo img {
   height: 66px;
   margin: auto;
   /*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/
   margin-left: 15px;
   margin-right: 15px
}