title: alignment with ordered list
body: <p>i have html here ...</p>
  
  <pre><code>&lt;!-- Contact --&gt;
      &lt;section id="volunteer" class="row" data-scroll-factor="0.7"&gt;
        &lt;div class="col-md-10 col-md-offset-1"&gt;
          &lt;div class="icon"&gt;&lt;i class="fa fa-info"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;h1&gt;Volunteer Projects&lt;/h1&gt;
          &lt;div class="section-content"&gt;
            &lt;p&gt;
            &lt;/p&gt;
             &lt;ul class="basiclist"&gt;
                         &lt;li&gt;Homeless Shelters and short term respite&lt;/li&gt;
                         &lt;li&gt;Addiction &amp; Rehabiliation support&lt;/li&gt;
                         &lt;li&gt;Domestic Violence/abuse&lt;/li&gt;
                         &lt;li&gt;Asylum Seekers and Refugees&lt;/li&gt;
                       &lt;/ul&gt;
  
                       &lt;br&gt;&lt;p&gt; If .&lt;/p&gt;
  
  
  
          &lt;/div&gt;
        &lt;/div&gt;&lt;!-- End of .col-md-10 --&gt;
      &lt;/section&gt;&lt;!-- End of Contact--&gt;
  </code></pre>
  
  <p>and my ul is always aligning to the left ... so i tried this css but it isnt working.</p>
  
  <pre><code>// Section: volunteer
  &amp;#volunteer{
  
      .basiclist{
  
  
              text-align:left;
          }
  </code></pre>
  
  <p>}</p>
  
  <p>so that's it really , not sure what stupid css issue there is although i suspect it is my own stupidity in this instance.  please help.</p>