I seem to be having trouble inserting an image in the "menu" section for the last item "Kava so sebou" after the text. I want the picture to be centered vertically and the row to maintain consistency with the other items above it. Any advice or suggestions would be greatly appreciated! By the way, I'm new to learning bootstrap and happen to be a girl - quite an interesting combination!
Custom CSS
.menu {
padding: 70px 0;
}
.menu .block > p {
color: #9D9D9D;
font-size: 16px;
line-height: 26px;
padding: 40px 133px 0;
text-align: center;
}
.menu .block .pricing-list {
padding-top: 5px;
}
.menu .block .pricing-list ul {
list-style-type: none;
padding: 0 0 30px;
margin: 0;
}
.menu .block .pricing-list ul li {
padding: 21px 0;
}
.menu .block .pricing-list ul li .item .item-title {
position: relative;
}
.menu .block .pricing-list ul li .item .item-title h2 {
display: inline-block;
position: relative;
z-index: 99;
background: #fff;
}
.menu .block .pricing-list ul li .item .item-title .border-bottom {
position: absolute;
top: 0;
width: 100%;
height: 1px;
border: 1px dotted #C9C9C9;
margin-top: 40px;
}
.menu .block .pricing-list ul li .item .item-title .border-bottom-coffee {
position: absolute;
top: 50px;
width: 100%;
height: 1px;
border: 1px dotted #C9C9C9;
margin-top: 30px;
}
.menu .block .pricing-list ul li .item .item-title span {
float: right;
color: #938463;
}
.menu .block .pricing-list ul li .item .item-title img {
padding-bottom: 20px;
}
.menu .block .pricing-list ul li .item p {
padding: 12px 0;
color: #949494;
} <!-- Start Menu list -->
<section id="menu" class="menu">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="pricing-list">
<div class="title">
<div class="container">
<ul>
<li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1100ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1100ms; animation-name: fadeInUp;">
<div class="item">
<div class="item-title">
<h2>Pivo 10 0.5L</h2>
<div class="border-bottom"></div>
<span>€ 1.20</span>
</div>
<p>Zlatý Bažant, Staropramen</p>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1200ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1200ms; animation-name: fadeInUp;">
<div class="item">
<div class="item-title">
<h2>Káva so sebou </h2>
<div class="border-bottom"></div>
<span>€ 1.20</span>
</div>
<p>Štrbské Presso</p>
</div>
</li>
</ul>
</div>
</div><!-- block close -->
</div><!-.col-md-12 close-->
</div><!-.row close-->
</div><!-.container close-->
</section><!-.price close-->