如何将内容移动到 flex 列的左侧

Question

我正在尝试将第一个site-header-section子项中的内容向左移动，因为左侧的间隙太大，但我似乎无法移动它。 我错过了什么？

<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

虽然它不是一个完全响应的解决方案，但您可以求助于使用

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

这应该只是将 div 移动到卡在屏幕的左侧。 如果它在最左边，请尝试为“left”属性设置一个大于 0 的值，例如 10px。

Answer 2

你有padding-left: 20px在 div 这个 class 名称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 。 如果您取消它，它将解决您的问题。