title: how to position nested list items?
body: <p>Well I'm a web design newbie. Any help would be appreciated. </p>
  
  <p>I'm learning html and css by doing a live project and got stuck in positioning nested list items.</p>
  
  <p>My web browser render look like this.</p>
  
  <p><img src="https://i.stack.imgur.com/BpXsR.png" alt="enter image description here">
  My HTML:</p>
  
  <pre><code>&lt;nav class="nav-sidebar"&gt;
  &lt;ul class="sidebar-ul"&gt;
      &lt;li class="sidebar-parent"&gt;parent-item-1
          &lt;ul class="sidebar-sublist"&gt;
              &lt;li class="sidebar-children"&gt;child 1&lt;/li&gt;
              &lt;li class="sidebar-children"&gt;child 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="sidebar-parent"&gt;parent-item-2
          &lt;ul class="sidebar-sublist"&gt;
              &lt;li class="sidebar-children"&gt;child 1&lt;/li&gt;
              &lt;li class="sidebar-children"&gt;child 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="sidebar-parent"&gt;parent-item-3
          &lt;ul class="sidebar-sublist"&gt;
              &lt;li class="sidebar-children"&gt;child 1&lt;/li&gt;
              &lt;li class="sidebar-children"&gt;child 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <p>for the nav side bar </p>
  
  <pre><code>.nav-sidebar{
  width: 250px;
  background: #444444;
  position: fixed;
  height: 100%;}
  </code></pre>
  
  <p>for the parent li</p>
  
  <pre><code>.sidebar-parent{
  display: block;
  width: auto;
  padding-right: 5px;
  padding-left: 20px;
  border-bottom: 1px solid #211D1D;
  text-transform: uppercase;
  font-size: 1em;
  font-family: helvetica;
  text-decoration: none;
  background: #2D2828;}
  </code></pre>
  
  <p>for the children li</p>
  
  <pre><code>.sidebar-children{
  text-decoration: none;
  text-transform: lowercase;
  color: #efefef;
  background: #000000;
  padding-right: 5px;
  padding-left: 20px;
  width: auto;
  display: block;}
  </code></pre>
  
  <p>How can I position the children to align to the extreme left of the sidebar? At least just below the parent <code>li</code>? </p>
  
  <p>Thank you so much for helping out, and sorry for my horrible English and code. Thanks for any help.</p>