Custom Unordered List breaking landing pages

I’ve noticed an issue with adding custom CSS styling to unordered lists on a couple of landing pages I’ve built recently.

I’ve pinpointed it to Unbounce’s inbuilt page load scripts.

On landing pages with custom <ul> CSS rules, it will either apply an inline width rule that is wider than the mobile viewport (thus breaking the layout) or a negative letter-spacing rule to the <div> wrapping the <ul> element.

I’ve applied the following in a textbox (DESKTOP: 450px wide; MOBILE: 300px wide) on a blank landing page:

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus enim, suscipit et magna vitae, efficitur sodales ante.&nbsp;</li>
    <li>Aliquam gravida iaculis elementum. Sed fringilla, nisl sed iaculis malesuada, dui urna ultrices augue, non ultricies erat turpis rhoncus arcu. Ut enim ex, bibendum ac pretium non, malesuada ac erat. Ut quis blandit leo.&nbsp;</li>
    <li>Vivamus euismod feugiat velit, sed lobortis arcu ultrices nec. Phasellus feugiat dolor iaculis, dignissim erat sit amet, iaculis leo. Nam eget magna lacinia, tristique mauris lacinia, tempor dui.&nbsp;</li>
    <li>Maecenas est diam, scelerisque ut posuere lobortis, tempor nec eros. Vivamus tempor ante sed erat ornare, ac pulvinar nisi imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tellus lorem, efficitur quis fringilla nec, lacinia
        ut felis.&nbsp;</li>
    <li>Etiam posuere pretium velit sit amet viverra. Etiam pharetra sem tortor, ac rhoncus urna volutpat ut. Sed eget metus id tellus pellentesque feugiat cursus in turpis.</li>
</ul>

I then add the following stylesheet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<style>
      ul {
      }
      ul li {
        list-style-type: none !important;
        position: relative;
        margin-bottom: 15px;
      }
      ul li:before {
        content: '\f054';
        font-family: FontAwesome;
        position: absolute;
        top: 2px;
        left: -16px;
        color: #00b0aa;    
        font-size: inherit;
        line-height:1;
      }
</style>

On mobile it looks ok, but on desktop it applies a negative letter spacing rule.

I believe Unbounce is trying to retain the original width and/or height for the textbox.

Is there a way I can setup custom unordered lists that will work?