I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized.
I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Instead, it caused the li elements to be separated into different blocks.
#time-line{
max-width: 700px;
margin:0 auto 0 auto;
font-family:Georgia, 'Times New Roman', Times, serif;
}
ul{
line-height: 2em;
}
.dates{
font-weight:bold;
} <section id="time-line">
<h2>Follow His Timeline.</h2>
<!--List Element I want to align-->
<ul><!--when the code displays the hyphens are not all vertically on a straight line I have tried adding <div> to them and give them a specific with but in does not display them in line it breaks the contain-->
<li><time datetime="1901-09-21" class="dates">Sep 21, 1901 - </time></span> Knrumah is born in Ghana.</li>
<li><time datetime="1935-08-07" class="dates">Aug 07, 1935 - </time>Moved to America and goes to Lincoln University.</li>
<li><time datetime="1939-05-22" class="dates">May 22, 1939 - </time>Graduation from University</li>
<li><time datetime="1945-09-09" class="dates">Sep 09, 1945 - </time>Moves to London and he helped to organize the Fifth Pan-African Congress.</li>
<li><time datetime="1947-05-11" class="dates">May 11, 1947 - </time>Wrote his first book, <cite id="book-title">"Towards Colonial Freedom"</cite></li>