Head section out of alignment from markdown in one of the sections

Hi all,

I have added a markdown section with custom code in one of the sections in the portrait page of my website:

https://www.andreassoteriou.com/get-your-photo-taken

As you can see, the head section is out of alignment (and social media icon is off) with the other pages. I know for a fact that the markdown section (below testimorial carousel) is causing this, because when I delete this section. The header looks normal again.

I have no clue what this could be, other than perhaps markdown element taking up too much space? But it is not going outside of the width of the page, so I am a bit confused.

Anyone has any idea why this could be? If not exactly why, perhaps any idea of something I might be overlooking?

Cheers!

Password: letstrythisout

The codes for the markdown:

HTML:

<div class="markdown-block">

  <div class="portrait">
  <i class="icon fa-solid fa-image-portrait"></i>
    <div class="boxBorderHeading">
   **PORTRAITS**
   </div>
   <div class="boxBorderText">
   My specialization and passion is portrait photgraphy. I have a burning desire to make your visions come to fruitition. 
  </div>
 </div>
  
 <div class="group">
  <i class="icon fa-solid fa-user-group"></i>
    <div class="boxBorderHeading">
   **GROUP PHOTOS**
   </div>
   <div class="boxBorderText">
   Also available to arrange group 
 </div>
 </div>
  
 <div class="portfolio">
  <i class="icon fa-regular fa-image"></i>
    <div class="boxBorderHeading">
   **PORTFOLIO**
   </div>
   <div class="boxBorderText">
  My specialization and passion is portrait photgraphy. I have a burning desire to make your visions come to fruitition. 
   </div>
 </div>
 
</div>
 

CSS:

<style>

  
.markdown-block { 
   display: flex;
    flex-direction: row;  
    width: 100%;
    align-items: flex-end;
    color: black;
    justify-content: space-evenly;

  
  }

  .portrait, .group, .portfolio {
   border: black solid 1px;
    height: 300px;
    width: 25%;
    
}

.portrait:hover {
  background: black;
  color: white;  
}

.group:hover {
  background: black;
  color: white;  
}
  
.portfolio:hover {
  background: black;
  color: white;  
}

.boxBorderHeading, .boxBorderText {
  font-size: 1em;
}
  
.boxBorderHeading {
  padding-left: 20px;
  padding-top: 60px;
}

.boxBorderText {
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 30px;
  text-transform: none;
}
  
.icon {
  padding-left: 20px;
  padding-top: 20px;
  font-size: 2em;
}
</style>

Hi again,

FYI I resolved the issue. The problem was that I added padding to the icon class without realizing this class was already used by social media icon in header, hence making that part unaligned.