Custom CSS working only when in editor mode

Site URL: http://www.homejoydesigns.com

Hi, 

Hope someone can help me with a very frustrating issue. I added some custom CSS to a website I'm building and while I see the changes in the editor mode, when I open the site in any browser, the changes disappear. 

Attached what I'm trying to do - to add a border around each block of text (i.e. Full Service Design + Learn More) like on the screenshot attached. 

website: homejoydesigns.com

password: homejoydesigns

The code I use is: 

Try adding this new code to Design > Custom CSS

/* 3 boxes */
div#page-section-60710969cd5e2035f1919fd4 .span-4 {
    border: 2px solid #546978;
    width: 30%;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 20px;
}
div#page-section-60710969cd5e2035f1919fd4 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
@media screen and (max-width:767px) {
div#page-section-60710969cd5e2035f1919fd4 .span-12>.row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#page-section-60710969cd5e2035f1919fd4 .span-4 {
    margin-bottom: 30px;
    width: 100% !important;
}
}