title: Resolving issue with Materialize dropdown
body: <p><strong>For reference:</strong></p>
  
  <ol>
  <li>The tool I'm using: <a href="https://materializecss.com/" rel="nofollow noreferrer">https://materializecss.com/</a></li>
  <li>The outcome I have: <a href="https://imgur.com/a/3s7ekTS" rel="nofollow noreferrer">https://imgur.com/a/3s7ekTS</a></li>
  <li>The outcome I want: <a href="https://imgur.com/a/8BJExER" rel="nofollow noreferrer">https://imgur.com/a/8BJExER</a> </li>
  </ol>
  
  <p>I have a dropdown on the navbar of my webpage. Before adding the class </p>
  
  <pre><code>.sidenav-trigger
  </code></pre>
  
  <p>To the following :</p>
  
  <pre><code>&lt;li&gt;&lt;a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"&gt;&lt;i class="material-icons"&gt;settings&lt;/i&gt;Settings&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Which is sat inside of the following <code>&lt;ul&gt;</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-html lang-html prettyprint-override"><code>&lt;ul id='dropdown1' class='dropdown-content'&gt;
    &lt;li&gt;
      &lt;a href="{% url 'FullSearch:Search' %}" style="color: black;"&gt;&lt;i class="material-icons"&gt;search&lt;/i&gt;Search&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="{% url 'UserProfiles:UserProfile' Username=UserName %}" style="color: black;"&gt;&lt;i class="material-icons"&gt;person&lt;/i&gt;Profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="{% url 'Discover:DiscoverPage' %}" style="color: black;"&gt;&lt;i class="material-icons"&gt;public&lt;/i&gt;Explore&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"&gt;&lt;i class="material-icons"&gt;settings&lt;/i&gt;Settings&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="{% url 'UserLogout:LogoutPage' %}" style="color: black;"&gt;&lt;i class="material-icons"&gt;arrow_back&lt;/i&gt;Logout&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The dropdown looks as intended. </p>
  
  <p>Simply removing this class won't work as I need it in order to have a pullout sidebar. </p>
  
  <p><strong>How can I resolve the alignment of the text in the dropdown?</strong></p>