“Is there a coding issue with the front web page of WordPress using HTML/CSS?”

So I just finished building a site called https://services.codexcentre.com, and able to duplicate the page fine on my PC.

But when I provide my friend to review the site, she inform me on the first page down below where the 4 boxes are located it looks squeezed together – this only shows on mobile (PC it looks fine.)

When I duplicate the problem on my phone, I find the same issue and not sure why it’s doing this. I have the code pasted below to how this was structured. To have an idea, this is a wordpress site and I custom coded this section due to problems with the wordpress column structure.

Any feedback is appreciated.

<style>

    .gallery_container{
        max-width: 1200px;
        padding: 30px;
        margin: 20px auto;
    }

    #shop_column{
        column-count: 2;
        column-gap: 15px;
    }

    #shop_page{
        text-align: center;
        font-family: 'Tangerine', cursive;
        font-size: 36px;
        padding: 0px;
        margin: 0px auto;
    }

    #shop_image{
        cursor: pointer;
        width: 750px;
        height: 345px;
        padding: 10px;
        margin: 10px auto;
    }


</style>



<div class="gallery_container">
    <div id="shop_column">
        <a href="http://services.codexcentre.com/new-build/">
            <img id="shop_image" src="imgs/home01.jpg">
        </a>
        <p id="shop_page">New Build</p>
        <a href="http://services.codexcentre.com/dining-remodel/">
            <img id="shop_image" src="imgs/dining01.jpeg">
        </a>
        <p id="shop_page">Living Room Remodel</p>
    </div>
    <div id="shop_column">
        <a href="http://services.codexcentre.com/kitchen-remodel/">
            <img id="shop_image" src="imgs/kitchen01.jpg">
        </a>
        <p id="shop_page">Kitchen Remodel</p>
        <a href="http://services.codexcentre.com/bathroom-remodel/">
            <img id="shop_image" src="imgs/bathroom01.jpg"> 
        </a>
        <p id="shop_page">Bathroom Remodel</p>
    </div>      
</div>