How to a make a Bootstrap button full width?

Question

This is what I have right now. I can't get it to become full width

Almost full width

This is the html. I've already tried adding .btn-block class but I get the same results as if I just used width: 100%; in the css. Maybe the problem is with the parent element?

<article class="col-xs-12 col-md-4">
            <div class="label label-success price"><span class="glyphicon glyphicon-tag"></span>$39</div>

            <div class="price-title">
                <h3>LOREM</h3>

                <small>Lorem Ipsum</small>
            </div>

            <div class="price-content ">
                <ul>
                    <li><h4>Item or Service # 1</h4></li>
                    <li><h4>Item or Service # 2</h4></li>
                    <li><h4>Item or Service # 3</h4></li>
                    <li><h4>Item or Service # 4</h4></li>
                    <li><h4>Item or Service # 5</h4></li>
                    <li><h4>Item or Service # 6</h4></li>
                </ul>

                <a href="#"><div class="btn btn-success">Sign Up</div></a>
            </div>
        </article>

And these are the styles

#tables{
color: white;
text-align: center;
margin: 15px 20px;}


.price{
position: relative;
top: 20px;
font-size: 30px;}

.price-content{
background-color: #E8E9EA;
color: #69696A;
padding-right: 50px;
padding-top: 30px;
height: 350px;
margin-bottom: 80px;
width: 100%;}

.btn{
border-radius: 0px;
font-size: 20px;
font-weight: bold;
width: 100%;}

Solution

Well first question... why the heck are you nesting a div inside the a tag? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Try this:

<a class="btn btn-block btn-success" href="#">Sign Up</a>

Then remove padding-right: 50px; from the .price-content selector.

Comments

[Andrés Liu]

You're right, I removed the div but still nothing changes

[Sean Stopnik]

Wait... you have padding-right: 50px; on your .price-content box. Thats why you button is not extending full-width.

[Andrés Liu]

Oh my god, yes that was the problem. Now, for some reason my list items are not centered, that's why I used the padding-right: 50px, any advice?

[Andrés Liu]

Don't know if it's the best way to do it, but I just added a "margin-right: 50px" to every "li". At least visually it gets the job done

[Stand Still]

Glad it helped. And just to add on to your solution of adding padding to all of the li's you can write css selector like .price-content > li{ padding-right:50px} instead of adding inline css for all the li's