Paragraph text using img space

I'm trying to make the whole thing clickable so I wrapped the image and paragraph inside an anchor tag. I gave the anchor tag a padding of 40px around and gave the img tag a right margin of around 30. Both of them have a display property of inline-block. The problem is it doesn't show like the one on the image(attached). How do I fix this? I'm not that good at CSS and HTML yet. Thanks.

<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas"><p>Meeting Minutes &amp; Agendas</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-bills.png" alt="pay bills online"><p>Pay Bills Online</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-document.png" alt="form &amp; document center"><p>Form &amp; Document Center</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions"><p>Frequently Asked Questions</p></a>
</div><!-- /.col-md-3 -->

My CSS is:

#panel p {font-family: 'Raleway', sans-serif;color: #fff;font-size: 18px;display: inline-block;margin: 0}
#panel img {width: 45px;margin-right: 25px;display: inline-block}
#panel a {background-color: #1b4952;display: block;border-radius: 10px;text-decoration: none}

What I want

What I have