From dc27106ff3f4d747398f70b59f264db5cd50a79d Mon Sep 17 00:00:00 2001
From: Arne <hello@cptarn.com>
Date: Tue, 25 Jul 2023 21:35:08 +0200
Subject: [PATCH] Fixed alignment of circles

---
 src/app/app.component.html | 12 ++++++------
 src/app/app.component.scss | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 814350b..0616b8d 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index deaa3c8..0587212 100644
--- a/src/app/app.component.scss
+++ b/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;
+
     }
   }
 }