Three Columns Sizing

I want to add three images in three mobile responsive columns at the bottom of the body on the Supreme Theme home page. I turn to page.php and find the appropriate place to embed the php coding to house three images side by side with a little css.

Three issues:
1. Is this the best way to create a three-column, mobile responsive, image display?
2. What is the maximum width to evenly divide the full width three ways with 40px margin separating each of those three images?
3. Any better ideas how-best to nest three images in a mobile responsive environment in a three column full width format?

Here is the way I did it:

<div style=”clear: both;”></div>
<div id=”bannercontainer”>
<div id=”bannerbox”><?php echo do_shortcode(“[pro_ad_display_adzone id=164]”); ?></div><div id=”bannerbox”><?php echo do_shortcode(“[pro_ad_display_adzone id=164]”); ?></div><div id=”bannerbox”><?php echo do_shortcode(“[pro_ad_display_adzone id=164]”); ?></div>
</div>
<div style=”clear: both;”></div>

#bannercontainer {
text-align: center;
width: 99%;
align: center;
clear: left;
}

#bannerbox {
width: 31%;
height: auto;
margin: 5px;
float:left;
}