Please see why my lists are not centring with CSS margin:auto

jecommera
jecommera used Ask the Experts™
on
Hi,

Please see my code below and advise why the code is not centring

<style type="text/css">

#conditions {
width:20em;
}

p {
font:0.8em Arial, Helvetica, sans-serif;color:#4c4c4c;
}

#delivery_container {
padding:0em;margin:0 auto;
width:20em;
}

.delivery_sub_container ol {
padding:1em;margin:0;
border:0.1em solid;
}
.delivery_list_red {
background-color:#de3200;
color:#FFFFFF;       
list-style:none;
font:bold 0.9em Arial, Helvetica, sans-serif;
padding:0.3em;
}

.delivery_list_white {
background-color:#fff;
list-style:none;
font:bold 0.9em Arial, Helvetica, sans-serif;color:#4c4c4c;
padding:0.2em;
}

</style>


<div id="delivery_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit tempus tellus euismod ultrices eu vehicula quam. Integer ac </p>
      <div class="headers">
            <ol>
                  <li class="delivery_list_red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                  <li class="delivery_list_white">&pound;0</li>
            </ol>
      </div>
      <div>
            <ol>
                  <li class="delivery_list_red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                  <li class="delivery_list_white">&pound;0</li>
            </ol>
      </div>
      <div>
            <ol>
                  <li class="delivery_list_red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                  <li class="delivery_list_white">&pound;0</li>
            </ol>
      </div>
      <div id="conditions">
            
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit tempus tellus euismod ultrices eu vehicula quam. Integer ac </p><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit tempus tellus euismod ultrices eu vehicula quam. Integer ac </p><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit tempus tellus euismod ultrices eu vehicula quam. Integer ac Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit tempus tellus euismod ultrices eu vehicula quam. Integer ac </p>
      </div>
      </div>
</div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015
Commented:
You could try adding this definition;


#delivery_container div ol {
    padding:0em;margin:0 auto;
    width:17em
}

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial