<!DOCTYPE html>
<html>
<head>
  <title>코드잇</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div id="navbar">
    <div id="helper">abc</div>
    <!-- abc를 <img>보다 더 먼저 입력했는데도, abc가 이미지보다 오른쪽에 뜹니다.-->
    <a id="logo" href="#">
      <img src="images/logo.png" height="25">
    </a>
  </div>
    
  <div class="hero-header">
    <div class="info">
      <h1><b>코딩</b>, 스펙이 아니라 <b>필수</b>입니다.</h1>
      <h2>코드잇은 코딩을 통해 생각하는 법을 가르칩니다.</h2>
      <a href="#">더 알아보기</a>
    </div>
  </div>
</body>
</html>

CSS

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
}


#navbar {
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
  height: 60px;
}
#helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 10px;
  background-color: purple;
}
#logo {
  display: inline-block;
  font-family: serif;
  float: left;
  vertical-align: middle;
  /* 이건 지우세요 */
  background-color: orange;
}


.hero-header {
  background-image: url("../images/hero_image.jpg");
  background-size: cover;
  background-position: center center;
  height: 670px;
  text-align: center;
}


.hero-header .info {
  /* 이건 지우세요 */
  background-color: orange;
}


.hero-header .info h1 {
  font-size: 36px;
  margin: 0;
  margin-bottom: 13px;
  color: white;
  font-weight: 400;
}


.hero-header .info h2 {
  font-size: 16px;
  margin: 0;
  margin-bottom: 60px;
  color: white;
  font-weight: 400;
}


.hero-header .info a {
  font-size: 14px;
  background-color: white;
  color: #464273;
  padding: 10px 40px;
  text-decoration: none;
  border-radius: 5px;
}

위에 올려둔 HTML에서 문제 부분을 발췌해서 적어보면, 다음과 같습니다.

</a>

</div>

출력 화면은 아래와 같습니다. 제가 빨간 화살표로 표시한 부분이 이상합니다. html 코드를 입력할 때는 "abc"를 <img src...> 보다 먼저 입력했는데,

출력물에서는 <img src...>가 abc보다 왼쪽에 위치해있습니다. 왜 이렇게 되는 건지 궁금합니다~!