how to remove the padding in dropdown-menu list <a>?
<pre><code>&lt;ul class="nav navbar-nav pull-right" style="margin-right: 25px;" &gt;
                 &lt;li&gt;&lt;a href="#"&gt; My Profile &lt;/a&gt;&lt;/li&gt;
                 &lt;li class="dropdown"&gt;
                 &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                  My Blog &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sports&lt;/li&gt;&lt;/a&gt;
                        &lt;li class="divider"&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#"&gt;Foods&lt;/li&gt;&lt;/a&gt;
                         &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Entertainment&lt;/li&gt;&lt;/a&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;Travel&lt;/li&gt;&lt;/a&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
</code></pre>

<p>how to delete the padding on my dropdown-menu list because its destroying the background color i put in there. This is the image of my current dropdown-list which having some problem on padding:</p>

<p><a href="https://i.stack.imgur.com/3pDPF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3pDPF.png" alt="enter image description here"></a></p>