Align center <ul> and <li> within a div in rails 4 app w/ bootstrap 3

Question

Similar variations of this question have been asked (specifically How to horizontally align ul to center of div?), but I'm not having any luck.

I am having issues getting my UL and LI to center within a div.

As you can see, the UL (ie "10 users/ 5TB disk space") is pulled to the right instead of being centered:

The view:

  <div class="container"><br>
      <div class="pricing-table pricing-three-column row">
          <div class="plan col-sm-3 col-md-3">
            <div class="plan-name-bronze">
              <h2>Bronze</h2>
              <span>$8.99 / Month</span>
            </div>
            <ul>
              <li class="plan-feature">10 Users</li>
              <li class="plan-feature">5TB Disk Space</li>
              <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
            </ul>
          </div>
          <div class="plan col-sm-3 col-md-3">
            <div class="plan-name-silver">
              <h2>Silver <span class="badge badge-warning">Popular</span></h2>
              <span><strike>$10.99</strike>   <font color="red">$9.99 - <span class="label label-warning">Sale</span></font></span>
            </div>
            <ul>
              <li class="plan-feature">50 Users</li>
              <li class="plan-feature">10TB Disk Space</li>
              <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
            </ul>
          </div>
          <div class="plan col-sm-3 col-md-3">
            <div class="plan-name-gold">
              <h2>Gold</h2>
              <span>$15.99 / Month</span>
            </div>
            <ul>
              <li class="plan-feature">Unlimited Users</li>
              <li class="plan-feature">Unlimited Space</li>
              <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
            </ul>
          </div>
      </div>
  </div>

And CSS:

.pricing-table .plan {
  margin: 5px;
  border-radius: 5px;
  text-align: center;
  background-color: #f3f3f3;
  -moz-box-shadow: 0 0 6px 2px #b0b2ab;
  -webkit-box-shadow: 0 0 6px 2px #b0b2ab;
  box-shadow: 0 0 6px 2px #b0b2ab;
}

 .plan:hover {
  background-color: #fff;
  -moz-box-shadow: 0 0 12px 3px #b0b2ab;
  -webkit-box-shadow: 0 0 12px 3px #b0b2ab;
  box-shadow: 0 0 12px 3px #b0b2ab;
}

 .plan {
  text-align: center;
  padding: 20px;
  color: #ff;
  background-color: #5e5f59;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.plan-name-bronze {
  padding: 20px;
  color: #fff;
  background-color: #665D1E;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

.plan-name-silver {
  padding: 20px;
  color: #fff;
  background-color: #C0C0C0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

.plan-name-gold {
  padding: 20px;
  color: #fff;
  background-color: #FFD700;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  } 

.pricing-table-bronze  {
  padding: 20px;
  color: #fff;
  background-color: #f89406;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.pricing-table .plan .plan-name span {
  font-size: 20px;
}

.pricing-table .plan ul {
  list-style: none;
  margin: 0;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.pricing-table .plan ul li.plan-feature {
  padding: 15px 10px;
  border-top: 1px solid #c5c8c0;
}

.pricing-three-column {
  margin: 0 auto;
  width: 80%;
}

.pricing-variable-height .plan {
  float: none;
  margin-left: 2%;
  vertical-align: bottom;
  display: inline-block;
  zoom:1;
  *display:inline;
}

.plan-mouseover .plan-name {
  background-color: #4e9a06 !important;
}

.btn-plan-select {
  padding: 8px 25px;
  font-size: 18px;
}

And fiddle

Answer 1

They aren't centered because default styling on the UL is to add left padding.

Add padding: 0; and problem solved. If you don't want the horizontal lines to stretch the full width you could balance out the padding (E.g. padding: 0 1em;).

.pricing-table .plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

Answer 2

UL element takes browser default padding. Use

.pricing-table ul {
    padding:0;
}