Increase a space between img and text inside a href element (word spacing?. padding?)

Question

I am trying to figure out how to make a space between text and image. I've tried everything I learned so far, including word spacing, padding.

Let me show you picture which will give you a better understanding of what I want to achieve. I want to increase space between the image and the text. Highlighted as yellow. How can I achieve it using this example code? Link to 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

I think giving the img a left/right margin should be the best solution. Easiest way to accomplish this:

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

Answer 2

If I understand your question..... I would just add left and right margins to the #logo img of about the space you want

#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
}