title: CSS-how to text-indent a nested unordered list
body: <p><img src="https://i.stack.imgur.com/BgzxM.png" alt="This is where I am at"></p>
  
  <p>I do not know if this is possible, but I'm trying to indent the &lt;li&gt; in red to wrap underneath itself with CSS. I've used text-indent, padding, margin, and cannot get it to work. The &lt;li&gt; in red seems to be set at the same x/y coordinate as the green text. It only lets me push it away from the time (in green).</p>
  
  <p>I can use a table, but I'm trying to accomplish this with CSS.</p>
  
  <p>The image above is where I am at. The image below is what I am after.</p>
  
  <p><img src="https://i.stack.imgur.com/EKh0O.png" alt="This is what I&#39;m after"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="agendaList"&gt;
      &lt;ul&gt;
          &lt;li&gt;Day, Month Date&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;0:00 am&lt;/li&gt;
                  &lt;li&gt;This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this &amp;lt;li&amp;gt;.&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Day, Month Date&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;0:00 am&lt;/li&gt;
                  &lt;li&gt;This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this &amp;lt;li&amp;gt;.&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.agendaList ul ul {
      list-style: disc;
      /* list-style-image: url(bullet.gif); */
      margin-left: 0;
      padding-left: 0;
  }
  
  .agendaList ul ul li {
      display: inline;
      list-style: none;
      color: green;
  }
  
  .agendaList ul ul li:last-child {
      display: inline;
      color: red;
      list-style-position: inside;
      padding: 10px 0 10px 20px;
      text-indent: -1em;
  }
  </code></pre>