UL don't stay within their containing DIVs?

Question

I have a really simple set up

  

    
Item one
    
Item two
  
<         


        
      

Answer 1

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;
}