title: How do I line up list bullets in CSS?
body: <p>So these bullets I have in this list are uneven and I want them to be even. I came across the answer some time ago but I could not find it for the life of me now. Any help is appreciated.</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>#div1 {
    border: black;
    border-style: inset;
    margin-top: 5em;
    text-align: center;
  }
  
  .div2 {
    border: blue;
    border-style: inset;
    height: 100%;
  }
  
  #salty {
    display: block;
    transform: rotate(90deg);
    width: 45em;
    height: 50em;
    margin-left: auto;
    margin-right: auto;
  }
  
  ul {
    list-style-position: inside;
    padding-left: 0;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-md-1"&gt;&lt;/div&gt;
  
      &lt;div class="col-md-10" id="div1"&gt;
        &lt;p id="p1"&gt;
          &lt;h1&gt;My Cat Salty&lt;/h1&gt;
        &lt;/p&gt;
        &lt;p id="p2"&gt;
          &lt;h2&gt;Salty is a floofball&lt;/h2&gt;
        &lt;/p&gt;
  
        &lt;div class="div2"&gt;&lt;img src="babysalty.jpg" id="salty" /&gt;
          &lt;p id="p3"&gt; This is my cat, Salty. &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="div3"&gt;
          &lt;ul&gt;
            &lt;li&gt;Salty is a cat.&lt;/li&gt;
            &lt;li&gt;This is a list item.&lt;/li&gt;
            &lt;li&gt;This is a list item.&lt;/li&gt;
            &lt;li&gt;Salty is fluffy.&lt;/li&gt;
            &lt;li&gt;This is a list item.&lt;/li&gt;
            &lt;li&gt;This is a list item.&lt;/li&gt;
            &lt;li&gt;Salty also has a fluffy tail.&lt;/li&gt;
            &lt;li&gt;This is a list item.&lt;/li&gt;
  &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And for some reason I can't get my CSS to display in the post so it's in the JSFiddle.</p>
  
  <p><a href="https://jsfiddle.net/dus0tLyt/4/" rel="nofollow noreferrer">https://jsfiddle.net/dus0tLyt/4/</a></p>