How can I properly align the food prices in the menu section on my website? I attempted to place each price within a span element inside an li element, but it only worked for the first item. Do I need to adjust my use of nth-child?
I've tried using nth-child, but it doesn't seem to be working as expected. Could there be an error in how I'm implementing it?
You can view the code here: https://jsfiddle.net/Gsimelus92/z8dna4c2/3/
.apett-left ul li:nth-child(1) {
margin-bottom:5px;
font-size: 19px;
font-weight: bold;
}
.apett-left span:nth-child(1){
color: #AA8A45;
margin-left:130px;
}
.apett-left ul li:nth-child(2) {
margin-bottom:5px;
font-size: 14px;
font-weight: normal;
border-bottom-style: dotted;
border-color: white;
padding-bottom: 5px;
margin-bottom: 15px;
}
.apett-left span:nth-child(2){
color: #AA8A45;
margin-left:130px;
}
/********************foodder and price 2 ******/
.apett-left ul li:nth-child(3) {
margin-bottom:5px;
font-size: 19px;
font-weight: bold;
}
.apett-left ul li:nth-child(4) {
margin-bottom:5px;
font-size: 14px;
font-weight: normal;
border-bottom-style: dotted;
border-color: white;
padding-bottom: 5px;
margin-bottom: 15px;
}
.apett-left span:nth-child(2){
color: #AA8A45;
margin-left:200px;
} <section class="pat-a">
<div class="apett-pic">
<img src="bbq-nachos.jpg"width="800" height="500">
</div>
<div class="apett-food">
<div class="apett-left">
<ul>
<li>Mozzarella Sticks <span>$7.00</span></li>
<li>Add pulled pork /homemade chilli / bbq beans <span>$1.50</span></li>
<li>Boneless Wing <span>$0.00</span></li>
<li>Plain / spicy / sticky bbq <span>$0.00</span></li>
<li>biscuits & bbq beans</li>
<li>each bicuite</li>
</ul>
</div>
</div>
</section>