请教一个 CSS 布局效果不显示问题

<title>Profile</title>

<!--
Disables zooming on mobile devices.
-->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!--
Stylesheet that minimizes browser differences.
See: http://necolas.github.io/normalize.css/
-->
<link rel="stylesheet" href="css/normalize.css">

<!--
Our own stylesheet.
-->
<link rel="stylesheet" href="css/main.css">

<div class="container">
  <header class="main-header">
    <img class="main-header__avatar" src="img/teng.jpg" alt="">
    <h1>Hi, I'm Teng Bao</h1>
  </header>

  <nav class="main-nav">
    <ul>
      <li><a href="#">Work</a></li>
      <li><a href="#">Experience</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <section class="info-section whatido">
    <header>
      <h2>What I Do</h2>
      <p class="info-section__description">I'm Teng. I design and develop things on the web. Oh, and I like curry.</p>
    </header>
    <ul class="whatido__skill-list">
      <li class="whatido__skill whatido__skill--code">
        <h3>Code</h3>
        <p>I like building things on the web. I've built games, tools, and web apps.</p>
      </li>
      <li class="whatido__skill whatido__skill--design">
        <h3>Design / UX</h3>
        <p>I like creating happiness by making things look good and work well.</p>
      </li>
      <li class="whatido__skill whatido__skill--product">
        <h3>Product</h3>
        <p>I like taking products from idea to reality to users and beyond!</p>
      </li>
    </ul>
  </section>

  <section class="info-section education-experience">
    <header>
      <h2>Education &amp; Experience</h2>
    </header>
    <ul class="education-experience__list">
      <li>
        <img src="img/strikingly-logo.png" alt="Strikingly">
        <h3>Strikingly</h3>
        <p class="education-experience__title">Cofounder, 2012 - Present</p>
        <p class="education-experience__description">Strikingly is a website builder that's simple, beautiful, and fun. And perfect for the age of mobile. I'm in charge of UI/UX and front-end.</p>
      </li>
      <li>
        <img src="img/echo-rocket.jpg" alt="Echo Rocket">
        <h3>Freelance Web/Game Developer</h3>
        <p class="education-experience__title">2007 - 2012</p>
        <p class="education-experience__description">EchoRocket was my one-man Flash game studio and web development/design consultancy. I built Spinblaster, Block Knocker, CampusAmp, HireBrite, and more!</p>
      </li>
      <li>
        <img src="img/u-of-chicago.jpg" alt="">
        <h3>University of Chicago</h3>
        <p class="education-experience__title">BA Economics, 2008-2012</p>
        <p class="education-experience__description">Studying the finer points of firms, markets, finance, decision theory, and supply and demand.</p>
      </li>
    </ul>
  </section>

  <section class="info-section photos">
    <header>
      <h2>Photos</h2>
      <p class="info-section__description">Some pics from my travels!</p>
    </header>
    <ul class="photos__list">
      <li>
        <img src="img/p01.jpg" alt="">
      </li>
      <li>
        <img src="img/p02.jpg" alt="">
      </li>
      <li>
        <img src="img/p03.jpg" alt="">
      </li>
      <li>
        <img src="img/p04.jpg" alt="">
      </li>
      <li>
        <img src="img/p05.jpg" alt="">
      </li>
      <li>
        <img src="img/p06.jpg" alt="">
      </li>
      <li>
        <img src="img/p07.jpg" alt="">
      </li>
      <li>
        <img src="img/p08.jpg" alt="">
      </li>
    </ul>
  </section>

  <section class="info-section get-in-touch">
    <header>
      <h2>Get in Touch</h2>
    </header>
    <ul class="get-in-touch__list">
      <li>
        <a href="#"><img src="img/fb-icon.png" alt=""></a>
        <p>Facebook</p>
      </li>
      <li>
        <img src="img/twitter-icon.png" alt="">
        <p>Twitter</p>
      </li>
      <li>
        <img src="img/linkedin-icon.png" alt="">
        <p>Twitter</p>
      </li>
      <li>
        <img src="img/email-icon.png" alt="">
        <p>Twitter</p>
      </li>
    </ul>
  </section>

  <section class="info-section contact">
    <header>
      <h2>Or...Leave a Message</h2>
    </header>
    <form action="">
      <label for="name">Name</label>
      <input name="name" id="name" type="text">
      <label for="email">Email</label>
      <input name="email" id="email" type="email">
      <label for="message">Message</label>
      <textarea name="message" id="message"></textarea>
      <button type="submit">Submit</button>
    </form>
  </section>

</div>