title: Bootstrap 4 remove margin for element via media query
body: <p>I'm trying to remove the margin mt-2 that I added in the nav-link element via media query in CSS when using mobile screen, but can't achieve that. It could be possible that I'm calling the class incorrectly.</p>
  
  <p>See example here>:
  <a href="https://i.stack.imgur.com/1V3ta.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1V3ta.png" alt="enter image description here"></a></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>@media (max-width: 991px) {
  
     .nav-link hovtext p-1 mt-2 a{
      margin: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class=" col-xs-12 col-sm-8 col-md-4   d-flex clearfix"&gt;
            &lt;nav class="nav flex-column footerstyle"&gt;
              &lt;a class="nav-link hovtext p-1 mt-2" href="#"&gt;Términos de uso&lt;/a&gt;
              &lt;a class="nav-link p-1" href="#"&gt;Políticas de privacidad&lt;/a&gt;
              &lt;a class="nav-link p-1" href="#"&gt;Socios&lt;/a&gt;
              &lt;a class="nav-link p-1" href="#"&gt;Confianza y Seguridad&lt;/a&gt;
            &lt;/nav&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>