Indents in nested lists in HTML / CSS

Question

I've started using Twitter Bootstrap, which is useful for me (as a programmer) to get a decent looking site without having to write much CSS.

However something is driving me crazy. I have a nested list like

<ul>
  <li>Hello</li>
  <li>World 
    <ul>
      <li>Wide</li>
      <li>Web</li>
    </ul>
  </li>
</ul>

But the first and second level of this list are NOT getting indented differently (ie. they align with each other on the left)

In normal html nested lists, deeper sublists indent more. But something in the style sheet must be turning this off. How do I find what controls this? I can't see a CSS "list indent" attribute for li elements in any documentation.

Answer 1

Just use Firebug in FF or Chrome dev-tools: right-click on your target and select inspect element. You can visually and textually inspect the CSS properties to see what's causing the collapse.

You probably want a rule like

ul > li {
    margin-left: 10px;
}