URGENT Codepen not working as it should be!!!!

Hello everybody, can someone help?

I've been trying to add this code below into my website but the results aren't quite as I intended.

This is a modified codepen I've found for a grid-services with hoover effect. Original codepen is: https://codepen.io/daya-s/pen/MOdzGY

After modifications it should be looking like this: 

But when I transfer the code into my website using <style> and <script> to rely the 3 codes, it turns out completely different:

This is the full code I've used: 

<div class="container">
  <h2 class="text-center text-bold">Our Services</h2>
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/clearing-settlement.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Payment Solutions</a></h3>
                            <p class="text-center">Payroll solutions, bulk & batched payments or 3rd party incoming payments – WE PROVIDE SOLUTIONS!</p>
                            
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/icon-connectivity-management.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Business Cash-Flow Strategy</a></h3>
                            <p class="text-center">Our tailor-made strategies will HELP YOU SAVE & PROTECT YOUR MONEY!</p>
                           
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/icon-issuing.png" width="80">
                        <div class="hover-div_inner">
                            <h3><a href="#">Multicurrency Accounts</a></h3>
                            <p class="text-center">Receive, Pay & Stock up money in domestic currencies!</p>
                      
            </div>
        </div>
                  
                  
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/citizen.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Private Foreign Exchange</a></h3>
                            <p class="text-center">Benefit from bank-beating exchange rates and our expertise every step of the way!</p>
                            
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/icons/wallet.png" width="100">
                        <div class="hover-div_inner">
                            <h3><a href="#">Financial Planning & Wealth Management</a></h3>
                            <p class="text-center">With our partners we provide you with regulated advice and full understanding of your financial needs</p>
                           
                        </div>
                    </section>
                </div>
                <div class="col-sm-4">
                    <section class="hover-div"> <img src="https://worldline.com/content/dam/worldline-new/assets/images/icons/expenditure.png" width="80">
                        <div class="hover-div_inner">
                            <h3><a href="#">Expense Reporting & Insurance</a></h3>
                            <p class="text-center">GO sustainable and environmentally friendly with pre-paid cards, monitor foreign expenses, manage receipts and streamline your accounting. </p>
                      
            </div>
        </div>
    </div>
    <style>
      body {
            font-family: 'Lato', sans-serif;
            padding-top: 0px;
        }
 .starter-template {
            padding: 20px 15px;
            text-align: center;
        }

span.lower-text {
            color: #ffc300;
            font-size: 25px;
            display: block;
        }
        
        .hover-div {
            padding: 20px 20px;
            text-align: center;
            min-height: 350px;
        }
        
        .hover-div {
            border-top: 1px solid #f8f8f8;
            background: #f8f8f8;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            margin: 10px 0px;
        }
        
        .hover-div:hover {
            -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px);
            box-shadow: 0 22px 43px rgba(0, 0, 0, 0.32);
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
    <script>
       $(document).ready(function () {
            $('.hover-div').hover(function () {
                $('.hover-div').stop().fadeTo('fast', 0.3);
                $(this).stop().fadeTo('fast', 1);
            }, function () {
                $('.hover-div').stop().fadeTo('fast', 1);
            });
        });
    </script>

Can anyone help me?

Thank you!

Hi. You missing some external libraries.

(Click Gear icon to see all external code libraries)

Also, your Codepen uses Bootstrap Framework, it will conflict with Editor Toolbar in Editing Mode.

You should find another code to achieve same layout.

I think we can also use Summary Block + CSS to achieve same layout. I will try testing code this weekend.