How to remove navbar padding
<p>In school we have an project were we shall create a website that is responsive. We use the system were you give an element an class, like <code>class="col-6 col-m-10"</code>. And i have an nav bar with some ul li in them. But, it does not line up with the side. I found out that the navbar has somekind of padding to it. </p>

<p>Here is a photo to understand better:</p>

<p><img src="https://i.stack.imgur.com/cd7OH.png" alt="photo"></p>

<p>How to remove the padding so it lines up with the header on top and the screen side on the left? Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: 'Ubuntu', sans-serif;
}
header {
    background-color: #ff9900;
    text-align: center;
    color: black;
    font-size: 30px;
    height: 65px;
}
nav ul {
 overflow: hidden;
 list-style-type: none;
 text-align: center;
}
nav ul li a {
 display: block;
 padding: 20px 10px;
 font-size: 20px;
 text-decoration: none;
    background-color: #ff9900;
    color: black;
}
nav ul li a:hover {
 background-color: #e68a00;
}
nav ul li a:active {
 background-color: #ffa31a;
 color: white;
}







.row::after {
    content: "";
    clear: both;
    display: block;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}



@media only screen and (min-width: 600px) {

    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/mainstil.css"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;header class="col-12 col-m-12"&gt;Personuppgiftlagen&lt;/header&gt;
 &lt;div clas="row"&gt;
  &lt;nav class="col-4 col-m-6"&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Personuppgiftslagen&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Lagen om elektronisk kommunikatio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Yttrandefrihetslagen&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Tryckfrihetsförordningen&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Etik och integritet&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;section class="col-8 col-m-6"&gt;
   &lt;img src="img/pul_s.jpg"&gt;
  &lt;/select&gt;
 &lt;/div&gt;



 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>