Why Don't UL Bullets Stay Within Their Containing DIV?

I have a really simple set up:

• Item one
• Item two

I had assu

Solution 1:

You'll want to use list-style-position:

ul {
   list-style-position: inside;
}

Solution 2:

You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.

Try adding some padding/margins to your list items (LI element).

Solution 3:

list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.

Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

Solution 4:

Are you floating your List items to the left or right? If so then the following will solve your problem.

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>

Solution 5:

For some cases, using two divs can help.

<div class="container">
  <div style="margin: 3%">
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </div>
</div>