title: Text word-wrapping in <li>
body: <p>In my <code>&lt;li&gt;&lt;/li&gt;</code> The words are wrapping towards underneath the bullet points instead of wrapping down underneath the first letter of the sentence.</p>
  
  <p>I was able to achieve centering my bullet points to the center of my page and having the text to be left-aligned. Now I want my words to wrap underneath the first letter of the sentence and not go left beyond the first letter towards the bullet points.</p>
  
  <p>This is all happening when I resized it down to mobile size.</p>
  
  <p><a href="https://i.stack.imgur.com/w2Klg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w2Klg.jpg" alt="list weird"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.plans {
    text-align: center;
  }
  
  .plans ul {
    display: inline-block;
    list-style-position: inside;
    text-align: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="plans"&gt;
  
    &lt;h2&gt;In magna dolor enim id reprehenderit sint magna in.&lt;/h2&gt;
  
    &lt;ul&gt;
      &lt;li&gt;Do anim aliqua veniam ullamco proident&lt;/li&gt;
      &lt;li&gt;Magna ex in reprehenderit ut officia in do aliqua ut.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Do dolore cupidatat&lt;/strong&gt; nostrud do anim adipisicing nostrud et dolore sed excepteur.&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Duis nulla aliqua&lt;/strong&gt; esse adipisicing et officia reprehenderit.&lt;/li&gt;
    &lt;/ul&gt;list
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>