index.html

<!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">
    <a id="logo" href="#">
      <img src="images/logo.png" height="25">
    </a>
    <ul>
      <li><a>로그인</a></li>
      <li><a>회원가입</a></li>
      <li><a>수업</a></li>
    </ul>
  </div>
    
  <div class="hero-header">
      <div class="helper"></div>
    <div class="info">
      <h1><b>코딩</b>, 스펙이 아니라 <b>필수</b>입니다.</h1>
      <h2>코드잇은 코딩을 통해 생각하는 법을 가르칩니다.</h2>
      <a href="#">더 알아보기</a>
    </div>
  </div>
</body>
</html>

css/styles.css

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

li {
  list-style: none;
  display: inline-block;
  padding: 0 15px;
  float:right;
  text-decoration: none;
  font-size: 16px;
  color : black;
  vertical-align: middle;
}

li a:hover {
  background-color: #EEEEEE;
}

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

#logo {
  font-family: serif;
  float: left;
  line-height: 60px;
}

#logo img {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#logo img {
  display: inline-block;
  vertical-align: middle;
}

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

.hero-header .info {
  display: inline-block;
  vertical-align: middle;
}

.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;
}

아무리 해봐도 백그라운드 컬러의 크기가 딱 글씨만해요.

예시처럼 세로는 네비게이션바만큼 꽉차고 가로도 좀 여유있게 안되네요....

어떻게해야할까요?