Текст и форма не центрированы под определенной шириной окна

Question

Я реализую отзывчивую страницу html. Я не могу воспроизвести дело на скрипке, поэтому я опубликовал страницу на «www.000webhost». Вот ссылка: https://test1flamant.000webhostapp.com/. Пожалуйста, используйте его на Firefox и дайте мне знать, если эта ссылка не работает

Проблема в том, что текст "Найди свой дом" на первой странице больше не центрируется на первом изображении под innerWidth это примерно 695 пикселей. Текст под этим ограничением остается с постоянным левым полем.

У меня та же проблема с формой на изображении ниже, под примерно тем же пределом.

Чтобы помочь вам, я отображаемые clientWidth и innerWidth вверху страницы. Пожалуйста, не обращайте внимания на другие детали на странице, так как я концентрируюсь только на этой проблеме.

Вот соответствующая часть html части кода относительно этой проблемы

  <div class="homePageImage1" style="background-size:cover;">
    <div class="position2 horizontal-center textAlignCenter lineHeight117 pinyonscriptregular120dieseFFFFFF">
      Find Your Home
    </div>
  </div>
  <div class="homePageImage2">
    <div class="position3 horizontal-center"  [formGroup]="searchFormGroup">
      <div class="position4 border2 textAlignCenter backgroundwhite poppinsextrabold14diese372300">
        Search
      </div>
      <span class="position5 width100percent" >
        <input class="floatLeft dimension1 border3 poppinsregular16diese372300" type="text" placeholder="Dans quelle ville ? Quartier ?" formControlName="ville">
        <input class="floatLeft dimension2 border4 poppinsregular16diese372300" type="text" placeholder="Votre budget max" formControlName="prixMax">
        <div class="floatLeft dimension3 textAlignCenter lineHeight48 backgroundPrimary poppinsbold12diese372300">SEARCH</div>
      </span>      
    </div>
    <div  class="position6">
      <a href="javascript:" class="poppinsregular14dieseFFFFFF textdecorationunderline">Advanced search</a>
    </div>
  </div>

Answer 1

Если вы хотите, чтобы текст «Найти свой дом» всегда был центрирован, вы можете сначала удалить свойство «position :lative» из класса «.homePageImage1».

И добавить правило @media включить свойство, только если ширина окна превышает определенную ширину (я нашел 1006 пикселей на моей стороне).

Это будет выглядеть так:

@media (min-width:1006px) {
    .homePageImage1 {
         position: relative;
    }
}

Таким образом, текст будет центрирован в соответствии с windows под 1006px.