My .home flex div is not filling up the entire length of the viewport in the mobile version

Question

For some reason, when I switch over to the mobile screen size option, my divs in the nav bar (.nbar) are lining up in a column correctly, but they are causing me two distinct problems:

1. They leave a distracting black border to the left, how can I get rid of this?

and

2. Most Importantly, the Home div was the same size as the other divs in the nav bar (testimony, contact, etc.). Now it is smaller, and I have not changed a single piece of code... What broke?

* {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent {
  display: flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}
/*WE MISSED THE .ONE SELECTOR*/

.one {
  flex-grow: 1;
}
.title {
  text-align: center;
  position: relative;
  font-size: 50px;
  top: 20px;
}
.header {
  height: 100px;
  width: 100%;
  order: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
  align-self: flex-start;
}
.banner {
  width: 100%;
  min-width: 960px;
  height: 500px;
  color: white;
  background-color: rgb(0, 0, 0);
  order: 3;
}
.boxOne {
  width: 45%;
  min-width: 200px;
  height: 300px;
  border-right: 1px solid rgb(0, 0, 0);
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120, 120, 120);
  text-align: justify;
}
.boxTwo {
  width: 45%;
  min-width: 200px;
  height: 300px;
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120, 120, 120);
}
.footer {
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(120, 120, 120);
  border-left: 1px solid rgb(120, 120, 120);
  order: 5;
}
.nbar {
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-flow: wrap;
  border-bottom: 1px solid rgb(0, 0, 0);
  order: 1;
}
.two {
  flex-grow: 0;
}
.home {
  order: 1;
}
.services {
  order: 2;
}
.testimonials {
  order: 3;
}
.portfolio {
  order: 4;
}
.contact {
  order: 5;
}
li {
  display: inline-flex;
  padding: 10px 40px 10px 60px;
  font-size: 15px;
  /*border: 1px solid rgb(0,0,0);*/
  /*text-align: center;*/
  align-content: stretch;
  justify-content: center;
  background-color: white;
  transition: background-color 0.08s linear;
}
li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
}
a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255);
}
.tt:link {
  text-decoration: none;
  color: black;
}
.tt:visited {
  text-decoration: none;
  color: black;
}
.tt:hover {
  text-decoration: none;
}
.disc {
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150, 150, 150);
}
.people {
  overflow: hidden;
  height: 500px;
  width: 960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/

@media only screen and (max-width: 500px) {
  .wrapper {
    min-width: 310px;
    -webkit-min-width: 310px;
  }
  .banner {
    min-width: 310px;
    background-color: gray;
    -webkit-min-width: 310px;
    -webkit-background-color: gray;
  }
  .people {
    width: 100%;
    height: 500px;
    -webkit-width: 100%;
    -webkit-height: 500px;
  }
  .parent {
    display: flex;
    flex-wrap: wrap;
    /*these two at the bottomr are optional to
                  center them on the page
                  max-width: 960px;
                  margin:0 auto;*/
    margin: auto;
    -webkit-display: flex;
    -webkit-flex-wrap: wrap;
    /*these two at the bottomr are optional to
                  center them on the page
                  max-width: 960px;
                  margin:0 auto;*/
    -webkit-margin: auto;
  }
  .nbar {
    height: 400px;
    flex-wrap: wrap;
    order: 1;
    /*margin: 0 auto;*/
    align-content: stretch;
    -webkit-height: 400px;
    -webkit-flex-wrap: wrap;
    -webkit-order: 1;
    /*margin: 0 auto;*/
    -webkit-align-content: stretch;
  }
  ul {
    background-color: black;
    -webkit-background-color: black;
  }
  .two {
    border: 1px solid rgb(0, 0, 0);
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  li {
    width: 100%;
    font-size: 30px;
    background-color: white;
  }
  .boxTwo {
    border-top: 1px solid rgb(0, 0, 0);
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<!-- dockmann -->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Dockmann Web Services">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Paul Aranguren">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div class="wrapper">
    <div class="parent">
      <div class="one header">
        <a class="tt" href="http://www.dockmann.com">
          <p class="title">DOCKMANN</p>
        </a>
      </div>
      <!-- end header -->
      <div class="one nav">
        <ul class="nbar">
          <a href="http://www.dockmann.com/">
            <li class="two home">
              HOME
            </li>
          </a>
          <li class="two services">
            SERVICES
          </li>
          <li class="two testimonials">
            TESTIMONIALS
          </li>
          <li class="two portfolio">
            PORTFOLIO
          </li>
          <li class="two contact">
            CONTACT
          </li>
        </ul>
      </div>
      <!-- end nav -->
      <div class="one banner">
        <img class="people" src="image/macdesk.jpg" />
      </div>
      <!-- end banner -->
      <div class="one boxOne">
        <h2>Who we are...</h2>
        <br />Our firm specializes in creating <b>minimalist</b> and <b>efficient</b>
        websites for the new professional. Our goal is to make your website the most effective tool in your arsenal.
      </div>
      <!-- end boxOne -->
      <div class="one boxTwo">
        <h2>Where we are</h2>
      </div>
      <!-- end boxTwo -->
      <div class="one footer">
        <p class="disc">
          Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp", "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the
          <thead>
            use of any product shown on this site.
            <br />This site is purely intended to provide the service mentioned in our page.
          </thead>
          Dockmann Corp. All rights reserved. ©2016
        </p>
      </div>
      <!-- end footer -->

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>

</html>

Answer 1

1. Black border

To fix the black border just set the ul element's padding-left to 0;

2. Home div size

To fix the home div just use the same element hierarchy which us ul > li > a. This was thrughing off the pattern that you started with.

* {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent {
  display: flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}
/*WE MISSED THE .ONE SELECTOR*/

.one {
  flex-grow: 1;
}
.title {
  text-align: center;
  position: relative;
  font-size: 50px;
  top: 20px;
}
.header {
  height: 100px;
  width: 100%;
  order: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
  align-self: flex-start;
}
.banner {
  width: 100%;
  min-width: 960px;
  height: 500px;
  color: white;
  background-color: rgb(0, 0, 0);
  order: 3;
}
.boxOne {
  width: 45%;
  min-width: 200px;
  height: 300px;
  border-right: 1px solid rgb(0, 0, 0);
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120, 120, 120);
  text-align: justify;
}
.boxTwo {
  width: 45%;
  min-width: 200px;
  height: 300px;
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120, 120, 120);
}
.footer {
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(120, 120, 120);
  border-left: 1px solid rgb(120, 120, 120);
  order: 5;
}
.nbar {
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-flow: wrap;
  border-bottom: 1px solid rgb(0, 0, 0);
  order: 1;
}
.two {
  flex-grow: 0;
}
.home {
  order: 1;
}
.services {
  order: 2;
}
.testimonials {
  order: 3;
}
.portfolio {
  order: 4;
}
.contact {
  order: 5;
}
ul {
  padding-left: 0;
}
li {
  display: inline-flex;
  padding: 10px 40px 10px 60px;
  font-size: 15px;
  /*border: 1px solid rgb(0,0,0);*/
  /*text-align: center;*/
  align-content: stretch;
  justify-content: center;
  background-color: white;
  transition: background-color 0.08s linear;
}
li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
}
a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255);
}
.tt:link {
  text-decoration: none;
  color: black;
}
.tt:visited {
  text-decoration: none;
  color: black;
}
.tt:hover {
  text-decoration: none;
}
.disc {
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150, 150, 150);
}
.people {
  overflow: hidden;
  height: 500px;
  width: 960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/

@media only screen and (max-width: 500px) {
  .wrapper {
    min-width: 310px;
    -webkit-min-width: 310px;
  }
  .banner {
    min-width: 310px;
    background-color: gray;
    -webkit-min-width: 310px;
    -webkit-background-color: gray;
  }
  .people {
    width: 100%;
    height: 500px;
    -webkit-width: 100%;
    -webkit-height: 500px;
  }
  .parent {
    display: flex;
    flex-wrap: wrap;
    /*these two at the bottomr are optional to
                  center them on the page
                  max-width: 960px;
                  margin:0 auto;*/
    margin: auto;
    -webkit-display: flex;
    -webkit-flex-wrap: wrap;
    /*these two at the bottomr are optional to
                  center them on the page
                  max-width: 960px;
                  margin:0 auto;*/
    -webkit-margin: auto;
  }
  .nbar {
    height: 400px;
    flex-wrap: wrap;
    order: 1;
    /*margin: 0 auto;*/
    align-content: stretch;
    -webkit-height: 400px;
    -webkit-flex-wrap: wrap;
    -webkit-order: 1;
    /*margin: 0 auto;*/
    -webkit-align-content: stretch;
  }
  ul {
    background-color: black;
    -webkit-background-color: black;
  }
  .two {
    border: 1px solid rgb(0, 0, 0);
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }
  li {
    width: 100%;
    font-size: 30px;
    background-color: white;
  }
  .boxTwo {
    border-top: 1px solid rgb(0, 0, 0);
    width: 100%;
  }
}

<div class="wrapper">
    <div class="parent">
      <div class="one header">
        <a class="tt" href="http://www.dockmann.com">
          <p class="title">DOCKMANN</p>
        </a>
      </div>
      <!-- end header -->
      <div class="one nav">
        <ul class="nbar">
          <li class="two home">
            <a href="http://www.dockmann.com/">HOME</a>
          </li>
          <li class="two services">
            SERVICES
          </li>
          <li class="two testimonials">
            TESTIMONIALS
          </li>
          <li class="two portfolio">
            PORTFOLIO
          </li>
          <li class="two contact">
            CONTACT
          </li>
        </ul>
      </div>
      <!-- end nav -->
      <div class="one banner">
        <img class="people" src="image/macdesk.jpg" />
      </div>
      <!-- end banner -->
      <div class="one boxOne">
        <h2>Who we are...</h2>
        <br />Our firm specializes in creating <b>minimalist</b> and <b>efficient</b>
        websites for the new professional. Our goal is to make your website the most effective tool in your arsenal.
      </div>
      <!-- end boxOne -->
      <div class="one boxTwo">
        <h2>Where we are</h2>
      </div>
      <!-- end boxTwo -->
      <div class="one footer">
        <p class="disc">
          Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp", "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the
          <thead>
            use of any product shown on this site.
            <br />This site is purely intended to provide the service mentioned in our page.
          </thead>
          Dockmann Corp. All rights reserved. ©2016
        </p>
      </div>
      <!-- end footer -->

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>