How to move content to left of flex column

Question

I am trying to move content within the first site-header-section child to the left as there is too much gap on the left hand side but I can't seem to shift it. What am I missing?

<div class="site-header-primary-section-left site-header-section ast-flex site-header-section-left">
   <div class="ast-builder-layout-element ast-flex site-header-focus-item" data-section="title_tagline">
      <div class="site-branding ast-site-identity" itemtype="https://schema.org/Organization" itemscope="itemscope">
         <span class="site-logo-img"><a href="https://puffpastrydelights.com/" class="custom-logo-link transparent-custom-logo" rel="home" itemprop="url"><img width="106" height="80" src="https://puffpastrydelights.com/wp-content/uploads/2021/04/puff-pastry-dellight.png" class="custom-logo" alt="Puff Pastry Delight" loading="lazy" srcset=""></a><a href="https://puffpastrydelights.com/" class="custom-logo-link ast-transparent-mobile-logo" rel="home" itemprop="url"><img width="106" height="80" src="https://puffpastrydelights.com/wp-content/uploads/2021/04/puff-pastry-dellight-1.png" class="custom-logo" alt="" loading="lazy"></a></span>
         <div class="ast-site-title-wrap">
            <h1 class="site-title" itemprop="name">
               <a href="https://puffpastrydelights.com/" rel="home" itemprop="url">
               Pastry Delights
               </a>
            </h1>
            <p class="site-description" itemprop="description">
               Made with love, served with pride
            </p>
         </div>
      </div>
      <!-- .site-branding -->
   </div>
   <div class="ast-builder-layout-element ast-flex site-header-focus-item ast-header-html-1" data-section="section-hb-html-1">
      <div class="ast-header-html inner-link-style-">
         <div class="ast-builder-html-element">
            <ul class="additional-menu">
               <li><a href="https://www.facebook.com/PastryDelights2020" class="fa fa-facebook" target="_blank"></a></li>
               <li><a href="https://www.instagram.com/puff_pastry_delights/" class="fa fa-instagram" target="_blank"></a></li>
               <li><a href="mailto:puffpastrydelights@gmail.com" class="fa fa-envelope" target="_blank"></a></li>
            </ul>
         </div>
      </div>
   </div>
</div>

CSS:

.site-header-section:first-child{
    display: flex;
  flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    margin:0;
    padding:0;
}

Answer 1

While it's not a completely responsive solution, you could resort to using

.site-header-section:first-child {
    position: relative;
    left: 0;
}

This should just move the div to be stuck against the left side of the screen. If that's to far left, try a higher value than 0 for the 'left' property, such as 10px.

Answer 2

You have padding-left: 20px in the div with this class names ast-primary-header-bar ast-primary-header main-header-bar site-primary-header-wrap site-header-focus-item ast-builder-grid-row-layout-default ast-builder-grid-row-tablet-layout-default ast-builder-grid-row-mobile-layout-default . If you cancel that, it would solve your problem.