html - 响应性/左边距

Question

我希望我的图像“锚定”到屏幕左侧，这样当我调整屏幕尺寸（特别是从左到右）时，图像与背景图像/叠加层保持相同的填充/边距.

目前，图像仅在到达屏幕左侧的最末端后才会调整。这会导致图像根据屏幕大小显示未居中。（见图像的视觉）

css

.laurel {
  width: 38vw;
  height: auto;
  left: 0%;
  padding-top: 30px;
 }

html（使用雨果） <img src="{{ .laurel | relURL }}" class="laurel img-responsive" alt="Img"

问题的图像和所需的解决方案

先感谢您！

编辑：整个代码如下 HTML

<section class="slider-invest {{ if .bg_overlay }}overly-invest{{ 
end }}" style="background-image: url('{{ .bg_image_slider | 
relURL }}');">
 <div class="container">
  <div class="row">
   <div class="col-md-12">
    <div class="block">
      {{ with .heading }}<h1>{{ . | markdownify }}</h1>{{ end }}
      {{ with .summary1 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary2 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary3 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary4 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
      {{ with .summary5 }}<h3 class="invest-slider-text">{{ . | 
      markdownify }}</h3>{{ end }}
    </div>
    <div>
    <img src="{{ .laurel | relURL }}" class="laurel" alt="Img">
    </div>
    {{ with .button }}
    {{ if .enable }}
    <a href="{{ .link | relLangURL }}" class="btn-invest btn btn- 
    main animated fadeInUp">{{ .label }}</a>
    {{ end }}
    {{ end }}
    </div>
  </div>
</div>

标签： htmlresponsiveness