Fixed alignment of circles

src/app/app.component.html

@@ -39,12 +39,12 @@
     </p>
     <h2>Hoe gaan we te werk?</h2>
     <div class="timeline">
-      <div><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
-      <div><p>We leggen je de werking uit van ons kantoor en kijken samen wat de beste ondernemingsvorm is voor jouw bedrijf.</p></div>
-      <div><p>We overlopen de voor- en nadelen van een éénmanszaak ten opzichte van een vennootschap, en wat de fiscale en boekhoudkundige gevolgen zijn van deze keuze.</p></div>
-      <div><p>Ons kantoor en onze werkmethodes worden voorgesteld en uw vragen over de verdere samenwerking zullen worden beantwoord.</p></div>
-      <div><p>Kleine dossiers met een beperkt aantal te boeken documenten krijgen de mogelijkheid om zelf de aan- en verkopen te registreren via eenvoudige Excel bestanden.</p></div>
-      <div><p>Interesse? Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens./p></div>
+      <div><span class="circle"></span><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
+      <div><span class="circle"></span><p>We leggen je de werking uit van ons kantoor en kijken samen wat de beste ondernemingsvorm is voor jouw bedrijf.</p></div>
+      <div><span class="circle"></span><p>We overlopen de voor- en nadelen van een éénmanszaak ten opzichte van een vennootschap, en wat de fiscale en boekhoudkundige gevolgen zijn van deze keuze.</p></div>
+      <div><span class="circle"></span><p>Ons kantoor en onze werkmethodes worden voorgesteld en uw vragen over de verdere samenwerking zullen worden beantwoord.</p></div>
+      <div><span class="circle"></span><p>Kleine dossiers met een beperkt aantal te boeken documenten krijgen de mogelijkheid om zelf de aan- en verkopen te registreren via eenvoudige Excel bestanden.</p></div>
+      <div><span class="circle"></span><p>Interesse? Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens./p></div>
     </div>
   </div>
   <img src="assets/b-images/customer.png" alt="klant">

src/app/app.component.scss

@@ -93,10 +93,18 @@ h2 {
     margin-left: 2rem;
 
     div + div {
-      margin-top: 5rem;
+      margin-top: 3rem;
     }
 
-    div:before {
+    div {
+      display: flex;
+    }
+
+    p {
+      width: calc(100% - 2rem);
+    }
+
+    .circle {
       content: '';
       display: inline-block;
       width: 3rem;
@@ -104,8 +112,9 @@ h2 {
       border-radius: 2rem;
       border: 0.5rem solid $white;
       background-color: $secondary-color;
-      position: absolute;
+      margin: auto;
       margin-left: -5rem;
+
     }
   }
 }