stuartpearman/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>CSS Spacing</title>
  <link rel="stylesheet" type="text/css" href="starter.css">
</head>
<body>
  <header>
    <div class="container">
      <nav class="navbar">
        <div class="navbar-title"> <!-- Should sit beside navigation -->
          <h1>Bear media group</h1>
        </div>
        <ul class="nav"> <!-- Links should sit horizontally -->
          <li><a href="#">Celebity bears</a></li>
          <li><a href="#">Opportunities</a></li>
          <li><a href="#">Hibernation report</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <section class="call-to-action">
      <h2>Content made for bears</h2>
      <p>We've been in the business of bear videos, images, GIFS, and literature for 9 bear years (4.5 human years).</p>
      <button class="cta-button">Follow Along</button>
    </section>
    <section class="gallery">
      <div class="container"> <!-- Center .container on page -->
        <h2>Featured bears</h2>
        <ul> <!-- Center with flexbox -->
          <li><img src="http://placebear.com/200/150"></li>
          <li><img src="http://placebear.com/220/165"></li>
          <li><img src="http://placebear.com/240/180"></li>
          <li><img src="http://placebear.com/260/195"></li>
          <li><img src="http://placebear.com/280/210"></li>
          <li><img src="http://placebear.com/300/225"></li>
        </ul>
      </div>
    </section>
  </main>
</body>
</html>

## starter.css
/* Starter stylesheet - Use style.css for custom code */

body {
  margin: 0;
  font-family: 'avenir', helvetica, arial, sans-serif;
  font-size: 1.1em;
}

header {
  border-bottom: 1px solid #eee;
}

button {
  font-size: 0.9em;
  border: none;
  border-radius: 4px;
  background: #2e67bd;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.gallery ul {
  list-style: none;
  padding-left: 0;
}

.gallery img {
  width: 100%;
}

.navbar a {
  text-decoration: none;
  color: #2e67bd;
}

.call-to-action {
  background: #eee;
  position: relative;
  overflow: hidden;
}

.call-to-action h2 {
  font-size: 2.5em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS Spacing</title>
	<link rel="stylesheet" type="text/css" href="starter.css">
	</head>
	<body>
	<header>
	<div class="container">
	<nav class="navbar">
	<div class="navbar-title"> <!-- Should sit beside navigation -->
	<h1>Bear media group</h1>
	</div>
	<ul class="nav"> <!-- Links should sit horizontally -->
	<li><a href="#">Celebity bears</a></li>
	<li><a href="#">Opportunities</a></li>
	<li><a href="#">Hibernation report</a></li>
	</ul>
	</nav>
	</div>
	</header>
	<main>
	<section class="call-to-action">
	<h2>Content made for bears</h2>
	<p>We've been in the business of bear videos, images, GIFS, and literature for 9 bear years (4.5 human years).</p>
	<button class="cta-button">Follow Along</button>
	</section>
	<section class="gallery">
	<div class="container"> <!-- Center .container on page -->
	<h2>Featured bears</h2>
	<ul> <!-- Center with flexbox -->
	<li><img src="http://placebear.com/200/150"></li>
	<li><img src="http://placebear.com/220/165"></li>
	<li><img src="http://placebear.com/240/180"></li>
	<li><img src="http://placebear.com/260/195"></li>
	<li><img src="http://placebear.com/280/210"></li>
	<li><img src="http://placebear.com/300/225"></li>
	</ul>
	</div>
	</section>
	</main>
	</body>
	</html>
	/* Starter stylesheet - Use style.css for custom code */

	body {
	margin: 0;
	font-family: 'avenir', helvetica, arial, sans-serif;
	font-size: 1.1em;
	}

	header {
	border-bottom: 1px solid #eee;
	}

	button {
	font-size: 0.9em;
	border: none;
	border-radius: 4px;
	background: #2e67bd;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	}

	.gallery ul {
	list-style: none;
	padding-left: 0;
	}

	.gallery img {
	width: 100%;
	}

	.navbar a {
	text-decoration: none;
	color: #2e67bd;
	}

	.call-to-action {
	background: #eee;
	position: relative;
	overflow: hidden;
	}

	.call-to-action h2 {
	font-size: 2.5em;
	}