CODEWITHSUNDEEP
htmlcss
havingagoatit
havingagoatit

Reputation: 583

alignment with ordered list

i have html here ...

<!-- Contact -->
    <section id="volunteer" class="row" data-scroll-factor="0.7">
      <div class="col-md-10 col-md-offset-1">
        <div class="icon"><i class="fa fa-info"></i></div>
        <h1>Volunteer Projects</h1>
        <div class="section-content">
          <p>
          </p>
           <ul class="basiclist">
                       <li>Homeless Shelters and short term respite</li>
                       <li>Addiction & Rehabiliation support</li>
                       <li>Domestic Violence/abuse</li>
                       <li>Asylum Seekers and Refugees</li>
                     </ul>

                     <br><p> If .</p>



        </div>
      </div><!-- End of .col-md-10 -->
    </section><!-- End of Contact-->

and my ul is always aligning to the left ... so i tried this css but it isnt working.

// Section: volunteer
&#volunteer{

    .basiclist{


            text-align:left;
        }

}

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.

Upvotes: 0

Views: 80

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65808

If you give the div class=section-content an id of say: myListContainer and then add this CSS rule, it may override the Bootstrap CSS:

 #myListContainer { text-align: left; }

text-align is not meant to be used directly on the element that you wish to align. It is meant to be applied to a block level element and then the content within that element is affected (inherited).

Upvotes: 1

Related Questions