Navbar – Trying to get nav bar to appear on top of page

Currently my navbar is appearing on the left side of the page instead of on top of the page. I have included a codepen of what my site looks like and also a picture of how I would like the nav bar displayed. I would like for the nav bar to appear at the top of the page, the survey on the left, and the results on the right side. If anyone could help it would be much appreciated!

Codepen

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Survey</title>
      <link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" target="_blank" rel="nofollow" href="style.css">
      <!-- <link rel="stylesheet" target="_blank" rel="nofollow" href="flexbox.css"> -->
    </head>
    <body>
      <main class="content" role="main">
      <header class="main-header">
        <h1 class="name"><a target="_blank" rel="nofollow" href="#">KeyPath Survey</a></h1>
        <ul class="main-nav">
          <li><a target="_blank" rel="nofollow" href="#">My Profile</a></li>
          <li><a target="_blank" rel="nofollow" href="#">Scores</a></li>
          <li><a target="_blank" rel="nofollow" href="#">Favorites</a></li>
        </ul>
      </header><!--/.main-header-->


      <div class="grid-100">

        <form action="">
          <div class="contained">

            <div class="grid-100">
              <!-- <h3>KeyPath Survey</h3> -->
              </br>

              <fieldset>
                <div>
                  <label for="">1. Mixtape put a bird on it sartorial?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">2. Williamsburg unicorn tumeric?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">3. Keytar raclette green juice?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">4. Edison bulb iceland af pug?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">5. Sriracha mumblecore typewriter?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">6. Tote bag shabby chic cred?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">7. Thundercats organic bushwick plaid?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">8. Vexillologist drinking vinegar food truck?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">9. Distillery tbh gastropub DIY austin?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
                <div>
                  <label for="">10. Godard thundercats raw denim four dollar?</label>
                </div>
                <div class="grid-75 grid-parent">
                  <div class="form-item">
                    <select name="" id="">
                        <option disabled selected>Select One</option>
                        <option value="v">Verbal Communication</option>
                        <option value="n">Nonverbal Communication</option>
                        <option value="w">Written Communication</option>
                      </select>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div class="form-footer">
            <button class="button primary submit">Submit Survey</button>
          </div>
        </form>

      </div>
      <div class="graph">
        <canvas id="myChart"></canvas>
      </div>

    </main>
    <!--   <div>
      Score: Verbal <span id="verbal">0</span>
      Non-Verbal <span id="non-verbal">0</span>
      Written <span id="written">0</span>
    </div> -->

    </body>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
      <script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

      <script src="main.js"></script>
    </html>



    .wrapper {
        width:90%;
        margin-right: auto;
        margin-left: auto;
    }

    .content {
      display: flex;
    }
    .grid-100, .graph {
      flex: 1 0 0;
      margin-left: 20px;
    }

    .grid-75 {
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .button {
        background-color: #5fcf80;
        border: solid 2px #5fcf80;
        font-size: 14px;
        height: 40px;
        line-height: 36px;
        padding: 0 15px;
        margin-top: 20px;
        color: #fff;
        margin-left: 40px;

    }

    fieldset {
      margin-bottom: 20px;
    }

    .form-footer .button {
      margin: 0 10px 10px 0;
    }

    div.chosen-container a.chosen-single {
        background: #e8ebed;
        border: 2px solid #e8ebed;
        outline: none;
        font-size: 14px;
        padding-right: 40px;
        height: 44px;
        color: #4b5658;
        box-shadow: none;
        border-radius: 5px;
        transition: background 0.25s ease;
    }

    .graph {
      margin-top: 30px;
    }



    /*Reset CSS */


    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    /* =================================
      Base Layout Styles
    ==================================== */

    /* ---- Navigation ---- */

    .name {
      font-size: 1.35em;
      margin: 0;
    }
    .main-nav {
      margin-top: 5px;
    }
    .name a,
    .main-nav a {
      text-align: center;
      display: block;
      padding: 10px 15px;
    }
    .main-nav a {
      font-size: .95em;
      color: #3acec2;
      text-transform: uppercase;
    }
    .main-nav a:hover {
      color: #093a58;
    }

    /* ---- Layout Containers ---- */

    .main-header {
      padding-top: .5em;
      padding-bottom: .5em;
    }
    .banner,
    .main-footer {
      text-align: center;
    }
    .banner {
      color: #fff;
      background: #3acec2;
      padding: 3.2em 0;
      margin-bottom: 48px;
    }
    .col {
      padding-right: 1em;
      padding-left: 1em;
    }
    .main-footer {
      background: #d9e4ea;
      padding: 2em 0;
      margin-top: 30px;
    }

    /* ---- Page Elements ---- */

    .logo {
      width: 190px;
    }
    .headline {
      margin-bottom: 0;
    }
    .feat-img {
      border-radius: 5px;
    }

    /* =================================
      Media Queries
    ==================================== */

    @media (min-width: 769px) {
      .main-header,
      .row {
        width: 90%;
        margin: 0 auto;
      }
      .tagline {
        font-size: 1.4em;
      }
    }
    @media (min-width: 1025px) {
      .main-header,
      .row {
        width: 80%;
        max-width: 1150px;
      }
    }


        var $selects = $("select"),
          data,
          ctx = $("#myChart"),
          config = {
            selected: 0,
            type: "pie",
            options: {
              responsive: true,
              pieceLabel: {
                render: function(args) {
                  var selected = function() {
                    var out = 0;
                    for (var i = 0; i < data.length; i++) {
                      out = out + data[i];
                    }
                    return out;
                  };
                  var percentage = Math.round(args.value / selected() * 100) + "%";
                  $('#'+args.label).text(percentage);
                  return percentage;
                },
                fontSize: 14,
                fontStyle: "bold",
                fontColor: "#fff",
                fontFamily: '"Lucida Console", Monaco, monospace'
              }
            },

            data: {
              labels: ["verbal", "non-verbal", "written"],
              datasets: [
                {
                  data: [0, 0, 0],
                  backgroundColor: ["#09c", "#c00011", "green"]
                }
              ]
            }
          };

    myChart = new Chart(ctx, config);

    $(".submit").on("click", function(e) {
      var results = { v: 0, n: 0, w: 0 },
        hasSelected = 0;
      e.preventDefault();
      $selects.each(function() {
        var val = $(this).val();
        if (val) {
          results[val]++;
          hasSelected = 1;
        }
      });
      if (hasSelected) {
        data = [];
        $.each(results, function(k, v) {
          data.push(v);
        });
      } else {
        data = JSON.parse(localStorage.getItem("data"));
      }
      config.data.datasets[0].data = data;
      myChart.update();
      localStorage.data = JSON.stringify(data);
    });

You need to set .content to flex-direction: column; to force the results beneath the header.

Then you can set main-header to display: flex; with justify-content: space-between to separate the title and navigation.

codepen