Trouble with coding Icons

 Hi! I have coded some icons that are supposed to go above some text that i have on my website. it is supposed to look like as in picture 1, with the icons and text aligning horizontally, which it does in EDIT mode. But, when in preview mode and the final site, it looks as in picture 2.

I added them using these HTML codes (starting from left):

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M15.787 7.531c-5.107 2.785-12.72 9.177-15.787 15.469h2.939c.819-2.021 2.522-4.536 3.851-5.902 8.386 3.747 17.21-2.775 17.21-11.343 0-1.535-.302-3.136-.92-4.755-2.347 3.119-5.647 1.052-10.851 1.625-7.657.844-11.162 6.797-8.764 11.54 3.506-3.415 9.523-6.38 12.322-6.634z"/></svg>
  <p> <strong><div style="color:black;">Hållbart producerad</p></div></strong>
<p>tryckt på miljömärkt FSC-certifierat papper</p>

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
  <p><strong><div style="color:black;"</strong>Lokal produktion</p></div> </strong>
  <p>Tillverkat nära dig, on demand. Ingen överproduktion</p>

<div style="text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<p><strong><div style="color:black;">Hög kvalité</p></div></strong>
<p>Tryckt på bästa papper av museikvalité</p>

Any ideas on why this happens? Is it a bug or is my coding incorrect? I am very new to this hehe 🙂

Thanks

Hi,

Your code missing 3 closing div tags. It should be

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M15.787 7.531c-5.107 2.785-12.72 9.177-15.787 15.469h2.939c.819-2.021 2.522-4.536 3.851-5.902 8.386 3.747 17.21-2.775 17.21-11.343 0-1.535-.302-3.136-.92-4.755-2.347 3.119-5.647 1.052-10.851 1.625-7.657.844-11.162 6.797-8.764 11.54 3.506-3.415 9.523-6.38 12.322-6.634z"/></svg>
  <p> <strong><span style="color:black;">Hållbart producerad</span></strong></p>
<p>tryckt på miljömärkt FSC-certifierat papper</p>
</div>

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
  <p><strong><span style="color:black;">Lokal produktion</span></strong></p>
  <p>Tillverkat nära dig, on demand. Ingen överproduktion</p>
</div>
<div style="text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
  <p><strong><span style="color:black;">Hög kvalité</span></strong></p>
<p>Tryckt på bästa papper av museikvalité</p>
</div>