These bullet points in my list are not aligned properly, and I am looking for a way to make them even. I remember finding a solution before, but I can’t seem to locate it now. Any assistance would be greatly appreciated.
#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;
}<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" id="div1">
<p id="p1">
<h1>My Cat Salty</h1>
</p>
<p id="p2">
<h2>Salty is a floofball</h2>
</p>
<div class="div2"><img src="babysalty.jpg" id="salty" />
<p id="p3"> This is my cat, Salty. </p>
</div>
<div class="div3">
<ul>
<li>Salty is a cat.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>Salty is fluffy.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>Salty also has a fluffy tail.</li>
<li>This is a list item.</li>
</ul>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>For some reason, the CSS code is not displaying in the post, so I have included a link to the JSFiddle below: