Evenly space logos in footer widget

We recently replaced the middle image logo (which display on all pages but home page) with code for a logo provided by the company that ranked this site.  After doing that, we noticed that the logos are no longer evenly spaced.  See screen shot below:

Site
https://rochesterinn.com/rochester-inn-room-amenities/

Screen shot
https://screencast.com/t/6JeQKW8xVA

I tried using inspector to fix but when I did and you resized site for a phone, then the left and right logo got super tiny.

Here is code provided for middle logo:

<div id="hc-ratingRatingHotel">
<div id="hc-ratingRatingHotel__inner"><img id="hc-ratingRatingHotel__ribbon" src="https://media.datahc.com/ratinghotel/stellar2/ribbon.png" />
<span id="hc-ratingRatingHotel__year">2017</span>
<span id="hc-ratingRatingHotel__award">RECOGNITION OF EXCELLENCE</span>
<div id="hc-ratingRatingHotel__hotelink"><a id="hc-ratingRatingHotel__hotelname" target="_blank"></a>The Rochester Inn</div>
<a id="hc-ratingRatingHotel__hclink" href="https://www.hotelscombined.com/" target="_blank" rel="noopener">HotelsCombined</a>

</div>
<div id="hc-ratingRatingHotel__rating"><span id="hc-ratingRatingHotel__number">9.4</span>
<span id="hc-ratingRatingHotel__pipe"></span> <span id="hc-ratingRatingHotel__ratedby">Rated by Guests</span></div>
</div>
<div id="hc-data__hotellink" style="display: none;">The_Rochester_Inn</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"> </script> <script>(function(){var rand = Math.floor((Math.random() * 99999999) + 1); function loadjscssfile(a,b){if("js"==b){var c=document.createElement("script");c.setAttribute("type","text/javascript"),c.setAttribute("src",a)}else if("css"==b){var c=document.createElement("link");c.setAttribute("rel","stylesheet"),c.setAttribute("type","text/css"),c.setAttribute("href",a)}"undefined"!=typeof c&&document.getElementsByTagName("head")[0].appendChild(c)} loadjscssfile('https://media.datahc.com/ratinghotel/stellar2/styles.css?v' + rand, 'css'); loadjscssfile('https://media.datahc.com/ratinghotel/stellar2/script.js?v' + rand, 'js'); })(); </script>

Select allOpen in new window

Here is my custom code for footer:

.site-footer p {
     font-family:font-family: 'Josefin Sans', sans-serif;
  margin:0px;
  padding:0px;
  }
  
.footer-widgets .widget {
   	margin: 0px auto; 
  padding:0px;  
max-width: 1140px;
}

Select allOpen in new window

Any ideas how to fix?