overlapping sections in 7.1 squarespace

Site URL: https://chihuahua-porpoise-hy7x.squarespace.com/

Hi guys i seem to be having trouble with some code when overlapping sections on 7.1

On my dashboard it is fine, but when i send the link to someone to view, it goes all out of shape covering all every section.

Also it does not constraint the mobile version of the text either.

Can someone see the issue with the code at all please?

[data-section-id="5f05ba10c138084aa1ceeab5"] {
    width: 80%;
    position: absolute;
    min-height: initial!important;
    z-index: 30;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*&+section {
        padding-top: 40px;
    }*/
    .content-wrapper {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    @media screen and (max-width: 767px) {
        position: relative;
        min-height: initial!important;
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius:0px;
        -webkit-transform: translate(-50%, 50%);
        -ms-transform: translate(-50%, 50%);
        transform: translate(-50%, -15%);
    }
}

Can you share access password?