Code solution wanted

Try using a grids plugin https://www.ads-software.com/plugins/lightweight-grid-columns/

get rid of all the BR tags, those are line breaks

<div class="entry-content">
  <div class="pf-menu-wrap">
      <a href="#">
         <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
         <span class="pf-icon-title">Websites</span>
      </a>

 <a href="#">
     <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
      <span class="pf-icon-title">Webshops</span>
 </a>

 <a href="#">
     <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
     <span class="pf-icon-title">Grafisch Ontwerp</span>
 </a>
</div>
   </div><!-- .entry-content -->

.pf-menu-wrap i {
    display: block;
    margin: 0 auto;
}
.pf-menu-wrap {
    text-align: center;
}
.pf-menu-wrap a {
    border: 1px solid #d65050;
    color: #d65050;
    text-decoration: none;
    display: inline-block;
    width: 30%;
    margin: 5px;
    float: left;
    min-height: 211px;
    text-align: center;
    padding-top: 40px;
}

Second issue,

There is CSS defining all .fa elements to be red:
.fa {
color: #d65050;
}

so adding the hover to the a tag does not affect the i tag’s color

you would have to either delete the above line of css or add
.fa:hover {color:#fff;};