Resizing and aligning text and images for mobile site 7.1

Site URL: https://www.spreadlovetours.com/4-hour-foot-subway

Hi everyone, this is a tour website I am creating for a client and I cannot figure out how to format the images and text properly, specifically on this page (there are multiple pages like this but if I can figure out how to do it on one I can figure out all of them) where the clock, sneaker, dollar sign, and statue of liberty icons are that have text next to them. On the desktop it looks fine, but when it is moved to mobile, the images become very large and the text either gets pushed down to the bottom of the page or its left-justified underneath each image. How can I re-format this in CSS so the images are smaller and aligned with the text? I'll add a photo of what it looks like on the mobile site. 

Add to Design > Custom CSS

/* Mobile align text icons */
@media screen and (max-width:767px) {
div#page-section-622baafe821a9e4bd3a1cb86 .span-1 {
    width: 18% !important;
    float: left !important;
}
div#page-section-622baafe821a9e4bd3a1cb86 .span-3 {
    width: 70% !important;
    float: left !important;
}}