title: How do I get rid of the extra space on the Dropdown menu?
body: <p>So I made a navigation bar with a drop down menu on hover but the problem is that the items in the list have acquired some extra <code>padding</code> on the left side out of no-where how can I remove the <code>padding</code>(I tried inspecting but couldn't find anything ).</p>
  
  <p>HERE's the Problem :
  <a href="https://i.stack.imgur.com/1Vn76.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Vn76.jpg" alt="PROBLEM"></a></p>
  
  <p>THIS IS WHAT I WANT :
  <a href="https://i.stack.imgur.com/o6pbm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o6pbm.jpg" alt="HOW IT SHOULD BE"></a></p>
  
  <p>THE CODE:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Raleway:600);
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
  * {
      margin: 0px;
      border: 0px;
  }
  
  
  /*Header*/
  
  header {
      position: relative;
      background-image: url(../img/forheader.png);
      background-size: cover;
  }
  
  .logo {
      background: rgba(224, 228, 40, 0.7);
      padding: 2.5%;
  }
  
  .logo img {
      position: relative;
      max-width: 35%;
  }
  
  
  /*Header Over*/
  
  
  /* NAVIGATION */
  
  nav {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 60px;
      z-index: 100;
  }
  
  .unfixed {
      background-color: white;
      -webkit-transition: background-color 0.4s linear;
      transition: background-color 0.4s linear;
      box-shadow: 0px 5px 14px rgba(53, 53, 51, 0.12);
  }
  
  .fixed {
      background-color: hsla(152, 78%, 41%, 0.9);
      -webkit-transition: background-color 0.4s linear;
      transition: background-color 0.4s linear;
      box-shadow: 0px 5px 14px hsla(152, 78%, 41%, 0.54);
  }
  
  nav img {
      position: absolute;
      top: 5px;
      left: 5px;
      height: 50px;
      display: none;
  }
  
  ul {
      position: absolute;
      right: 3%;
      line-height: 60px;
      height: 60px;
  }
  
  ul li {
      display: inline-block;
      position: relative;
      height: 100%;
  }
  
  .unfixed ul li a {
      text-decoration: none;
      font-family: 'raleway';
      font-size: 24px;
      display: inline-block;
      padding-left: 15px;
      padding-right: 15px;
      color: black;
      box-sizing: border-box;
      font-weight: 700;
  }
  
  .unfixed ul li a::after {
      content: "";
      display: block;
      width: 0%;
      position: absolute;
      left: 50%;
      bottom: 15px;
      height: 1px;
      background: black;
      -webkit-transition: 0.3s linear all;
      transition: 0.3s linear all;
  }
  
  .unfixed ul li a:hover::after {
      width: calc(100% - 30px);
      left: 15px;
  }
  
  .fixed ul li a {
      text-decoration: none;
      font-family: 'raleway';
      font-size: 24px;
      display: inline-block;
      padding-left: 15px;
      padding-right: 15px;
      color: white;
      box-sizing: border-box;
      font-weight: 700;
  }
  
  .fixed ul li a::after {
      content: "";
      display: block;
      width: 0%;
      position: absolute;
      left: 50%;
      bottom: 15px;
      height: 1px;
      background: white;
      -webkit-transition: 0.3s linear all;
      transition: 0.3s linear all;
  }
  
  .fixed ul li a:hover::after {
      width: calc(100% - 30px);
      left: 15px;
  }
  
  /*DROP DOWN*/
  
  
  nav ul li {
      position: relative;  
  }
  
  nav ul li ul {
       font-family: 'raleway';
       color: #fff; 
       font-size:24px;
       height: auto; 
       text-align:center;
       z-index:110;
       position: absolute; 
       left: 0; 
       right: 0; 
       top: 60px;
       -webkit-transform: scaleY(0);
       -webkit-transform-origin-Y: 0;
       -webkit-transition:all .5s;
  }
  .unfixed ul li ul{ 
      width: 150px; 
      background: rgba(228, 228, 228, 0.87); 
      box-shadow: 0px 5px 14px  hsla(152, 1%, 67%, 0.54);
  }
  .fixed ul li ul{
      background-color: hsla(152, 78%, 41%, 0.9);
      width:150px;
      box-shadow:0px 5px 14px hsla(152, 78%, 41%, 0.54)
  }
  
  nav ul li:hover ul {
       -webkit-transform: scaleY(1);
      
  }
  
  
  
  /*NAVIGATION OVER*/
  /*FOOTER*/
  
  /*FOOTER*/
  
  footer {
      position: relative;
      background: rgba(28, 29, 38, 0.95);
      color: white;
      font-family: 'Open Sans', sans-serif;
      padding: 30px;
      font-size: 13px;
      text-align: center;
  }
  
  footer h3 {
      margin: 5px;
  }
  
  footer .social {
      font-size: 17px;
  }
  
  footer .social img {
      width: 40px;
      height: 40px;
      margin: 10px;
      -webkit-transition: 0.4s linear all;
      transition: 0.4s linear all;
      -webkit-filter: saturate(0);
      -moz-filter: saturate(0);
      -o-filter: saturate(0);
      -ms-filter: saturate(0);
      filter: saturate(0);
  }
  
  footer .social img:hover {
      -webkit-filter: saturate(1);
      -moz-filter: saturate(1);
      -o-filter: saturate(1);
      -ms-filter: saturate(1);
      filter: saturate(1);
  }
  
  /*FOOTER OVER*/
  /* SCROLL BAR AND SELECTION */
  
  ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
      background: #444;
  }
  
  ::-webkit-scrollbar-track {
      background: #FFF;
      -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
      border: 1px solid #D8D8D8;
  }
  
  ::-moz-selection {
    color: white;
    background: #f01943;
  }
  
  ::selection {
    color: white;
    background: #f01943;
  }
  
  @media screen and (max-width:850px) {
       .fixed ul li a {
      text-decoration: none;
      font-family: 'raleway';
      font-size: 18px;
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      color: white;
      box-sizing: border-box;
      font-weight: 700;
  }
  .unfixed ul li a {
      text-decoration: none;
      font-family: 'raleway';
      font-size: 18px;
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      color: black;
      box-sizing: border-box;
      font-weight: 700;
  }
  nav img {
      position: absolute;
      top: 5px;
      left: 5px;
      height: 0;
          display: none;
  }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Forum&lt;/title&gt;
      &lt;link rel="stylesheet" href="../css/nav.css"&gt;
      &lt;link rel="stylesheet" href="../css/forum.css"&gt;
      &lt;script src="../js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="../js/nav.js"&gt;&lt;/script&gt;
      &lt;script src="../js/forum.js"&gt;&lt;/script&gt;
      &lt;link rel="shortcut icon" href="../img/favicon.ico" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="logo"&gt;
              &lt;center&gt;&lt;img src="../img/logo.png" alt="The Thrive Magazine"&gt;&lt;/center&gt;
          &lt;/div&gt;
      &lt;/header&gt;
     
              &lt;nav class="unfixed"&gt;
                  &lt;img src="../img/logo.png" alt="The Thrive Magazine"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="..//index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="column.html"&gt;Columns&lt;/a&gt; 
              
                          &lt;ul&gt;
                          &lt;li&gt;&lt;a href="column.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
                       &lt;center&gt;  &lt;li&gt;&lt;a href="fashion.html"&gt;Fashion&lt;/a&gt;&lt;/li&gt;
                      &lt;/center&gt;    &lt;li&gt;&lt;a href="video.html"&gt;Videos&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="interview.html"&gt;Interview&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;/li&gt;
                      &lt;li&gt;&lt;a href="team.html"&gt;Team Thrive&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="sexed.html"&gt;Sex-Ed Module&lt;/a&gt;&lt;/li&gt;     
                      &lt;li&gt;&lt;a href="forum.html"&gt;Share Your Story&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;div class = "arts"&gt;
              &lt;div class="submission"&gt;
          &lt;center&gt;
              &lt;h1&gt;SHARE YOUR STORY&lt;/h1&gt;
              &lt;form action="submit.php" method="post"&gt;
                  &lt;label&gt;Name :&lt;/label&gt;
                  &lt;input type="text" name="name" placeholder="optional"&gt;
                  &lt;br /&gt;
                  &lt;label&gt;Title :&lt;/label&gt;
                  &lt;input type="text" name="title" placeholder="required" required="required"&gt;
                  &lt;br /&gt;
                  &lt;label&gt;Your Story&lt;/label&gt;
                  &lt;br /&gt;
                  &lt;textarea name="story" required="required"&gt;&lt;/textarea&gt;
                  &lt;br /&gt;
                  &lt;input type="submit" name="submit" value="submit"&gt;
              &lt;/form&gt;
          &lt;/center&gt;
          &lt;/div&gt;
              &lt;div class="row"&gt;
                      &lt;article class="managerfc"&gt;
                          &lt;h1 class="namerest"&gt;Submissions&lt;/h1&gt;
                          &lt;h2 class="desigrest"&gt;Manager - Fashion Column&lt;/h2&gt;
                          &lt;div class="inforest"&gt;
                              &lt;p&gt;Hi! I'm Jaya, I love fashion and believe that there is no easier way to express yourself than through your clothes.&lt;/p&gt;
                              &lt;br&gt;
                              &lt;p&gt;Clothes aren't only an expression of who you are but are also a very good medium to share a message with people you meet. Fashion, through its passing conformities, helps to bridge the greater transitions of the process of social change.  Life isn't a dress rehearsal; it's the one and only life you've got.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/article&gt;
                      &lt;article class="creativedesig"&gt;
                          &lt;h1 class="namerest"&gt;Social Feeds&lt;/h1&gt;
                          
                          &lt;div class="inforest"&gt;
                              &lt;p&gt;Hi I'm Anshul, I wish to spread love wherever I go. I do not believe in letting anyone come to me without leaving them a little bit happier. And that is why I have faith in Thrive- It has the power to spread love, happiness, hope... and magic.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/article&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;footer&gt;
                  &lt;h3&gt;The Thrive Magazine. All Rights Reserved.&lt;/h3&gt;
                  &lt;br&gt;
                  &lt;h3&gt;Site designed by Dhruv Agarwal, Rasik Raj and Kush Parmar.&lt;/h3&gt;
                  &lt;h3&gt;Introductory movie  by Jahanvi Chopra.&lt;/h3&gt;
                  &lt;h3&gt;Photographs by Jatin Kumar Sawhney.&lt;/h3&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="social"&gt;
                      We are social
                      &lt;br&gt;
                      &lt;a href="https://www.facebook.com/thethrivemag" target="_blank"&gt;&lt;img src="../img/fb.png" alt="Social - Facebook"&gt;&lt;/a&gt;
                      &lt;a href="https://twitter.com/thethrive_mag?lang=en" target="_blank"&gt;&lt;img src="../img/twitter.png" alt="Social - Twitter"&gt;&lt;/a&gt;
                      &lt;a href="https://instagram.com/thethrivemagazine/" target="_blank"&gt;&lt;img src="../img/insta.png" alt="Social - Instagram"&gt;&lt;/a&gt;
                      &lt;br&gt;
                      Reach us at:&lt;br&gt;
                      &lt;u&gt;thethrivemag@gmail.com&lt;/u&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>