Reputation: 3

Unable to get custom bullet image to show right of list item

I'm trying to create a LIST with my bullets being check marks just to the right of each list item.

The list needs to be in the CENTER of page.

(I would have posted a graphic example but don't have rep points).

THIS IS WHAT I WANT IN THE CENTER OF THE PAGE.

LIST ITEM 1 ✔
LIST ITEM 2 ✔
LIST ITEM 3 ✔

Right now, my list IS in the center of the page, but the check marks are all the way to the right side of the page.

THIS IS WHAT I HAVE NOW (and do not want).

LIST ITEM 1                                                              ✔
LIST ITEM 2                                                              ✔
LIST ITEM 3                                                              ✔

      <div class="welcome-text">

          <div class="welcome-text1">
                <ul class="certs">
                    <li>Licensed</li>
                    <li>bonded</li>
                    <li>insured</li>
                </ul>
          </div>

          <div class="welcome-text2">
                The BEST Choice For Quality Termite Pest &amp; Lawn Care! Protecting your home starts with a free inspection.
          </div>

  </div>

Here is the CSS for the above:

.welcome-text{
    padding-top:30px;
    margin:0 auto;
    width:80%;
    overflow:hidden;

}

.welcome-text1{
    color:#333333;
    font-family:Open Sans Condensed;
    text-transform:uppercase;
    font-size:24px;
    line-height:30px;
}

.welcome-text1 ul{
    list-style-type: none;
    margin-left: 0;
}

.welcome-text ul li{
    display:block;
    background-color:#CCC;
    background: url(images/checkmark.png) right center no-repeat;

}

.welcome-text2{
    color:#777;
    font-family:tahoma;
    font-size:18px;
    line-height:20px;
}


.certs li{
    list-style: none;
    padding:3px;
    margin:0;

}

Any ideas?

TIA

Upvotes: 0