Question

I’m trying to place a padding around my 3rd li element called “widget-3” however it is not applying the padding. Can anyone help me figure out why this may be happening?

CSS

 .footer-widgets {
    width: 93.75%;
    max-width: 1000px;
    margin: 0px auto;
}

.footer-widgets li { 
    width:24%; 
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    float: left;
    padding: 0px;
}

.footer-widgets li p{ 
    width:92%;
    font-size: 1em;
    line-height: 16px;  
}

.footer-widgets li a{ 
    color: #17c3f5;
    text-decoration:none;
}

.footer-widgets li:nth-child(3) { width: 48% }
.widget-3 {background-color: #4f4c4a; border: 1px solid #666462; padding: 10px;}

.widget-3 p { width: 100% }

HTML

<footer class="clearfix">
<ul class="footer-widgets">

<li class="widget-1">
<h4>About Us</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>

<li class="widget-2">
<h4>Twitter</h4>
<p><a href="#">@ambergoodwin</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate egestas volutpat. Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 15 hours ago</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 17 hours ago</p>
<p>Morbi dignissim sapien sit amet ipsum vestibulum vel vehicula elit convallis. 11 hours ago</p>
<strong>Follow us on Twitter</strong>
</li>

<li class="widget-3">
<h4>Services</h4>
<p>Once you are on the web, it is even more important to have a unique voice in this competitive cyber market. Additional to web design, I also offer affordable services in logo design, business cards and brochures. Please don't hesitate to contact me and I will be happy to give you a free custom quote within 24 hours. I also offer affordable services in logo design.</p>
<strong>Learn more</strong>
</li>
</ul>


</footer>

Not sure what I’m doing wrong for the padding not to work?

Also, can anyone help me see why .widget-3 p {width: 100%} doesn’t work?

Any help is much appreciated.

Answer 1

The padding is being set to 0 by .footer-widgets li which has more specificity than .widget-3.

The width is being set to 92% by .footer-widgets li p which has more specificity than .widget-3 p.

Just add two new declarations at the end of your css:

li.widget-3 {padding: 10px;}
li.widget-3 p { width: 100% }

That should fix it.