<!DOCTYPE html>
<html>
  <head>
    <title>Buffer Style Guide</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/guide.css">
  </head>
  <body>

    <div class="flex-container">

      <header>

        <h1>buffer Style Guide</h1>

        <nav class='buffer-nav-horizontal'>
          <ul>
            <li>Atoms - Design Elements</li>
            <li>Molecules - UI Components</li>
            <li>About the Buffer Style Guide</li>
          </ul>
        </nav>
        
      </header>

      <main class="flex-container">

        <nav class="atom-list">
          <ul>
            <li>Grid</li>
            <li>Colors</li>
          </ul>
        </nav>

        <section class="content">

          <h2>Grid</h2>

          <h2>Colors</h2>

          <h2>Cards</h2>

          <div id='js-card'></div>

        </section>

      </main>

      <footer></footer>

    </div>

    <script src="/js/bundle.js"></script>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Buffer Style Guide</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/guide.css">
  </head>
  <body>

    <div class="flex-container">

      <header>

        <h1>buffer Style Guide</h1>

        <nav class='buffer-nav-horizontal'>
          <ul>
            <li>Atoms - Design Elements</li>
            <li>Molecules - UI Components</li>
            <li>About the Buffer Style Guide</li>
          </ul>
        </nav>

      </header>

      <main class="flex-container">

        <nav class="atom-list">
          <ul>
            <li>Grid</li>
            <li>Colors</li>
          </ul>
        </nav>

        <section class="content">

          <h2>Grid</h2>

          <h2>Colors</h2>

          <h2>Cards</h2>

          <div id='js-card'></div>

        </section>

      </main>

      <footer></footer>

    </div>

    <script src="js/bundle.js"></script>

  </body>
</html>

Use relative paths for github pages
Use relative paths for github pages
