Paragraph text not wrapping in Safari/iOS

Question

I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:

Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:

Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.

Here's the HTML:

<div id="home-cta-text">
    <p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
        MEMBERSHIPS AS LOW AS
    </p> 
    <div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
        <p><span>$19</span><sup>.99</sup></p>
        <p class="home-cta-subtext">PER MONTH</p> 
    </div>
    <div style="clear:both;"></div> 
</div>

And appropriate CSS:

#home-cta-text {
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.4);
    width: 377px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

#home-cta-right {
    float: left;
    width: 156px;
}

#home-cta-left p, #home-cta-mid p, #home-cta-right p {
    font-family: 'Franchise-Bold', Arial, sans-serif;
    font-size: 109px;
    color: #fff;
    line-height: 90px;
    padding-bottom: 0;
}

#home-cta-text p.home-cta-subtext {
    font-size: 40px;
    line-height: 40px;
}

#home-cta-text sup {
    position: relative;
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    font-size: 49px;
    display: inline;
    margin: 0;
    padding: 0;
    bottom: 43px;
}

Can anyone tell me what's going on here?

EDIT: I just noticed that if I remove my @font-face font, the text wraps normally. What's going on here?

Answer 1

尝试使用不'P'只使用DIV，并使用文本对齐中心

Answer 2

I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.

EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type ( http://www.weathersbeetype.com/fonts/franchise/ ) and it now works in Safari 10+ (and all other browsers).