How to make the text on the background not fly out of the background? The screen is scaled and I see that the text on the left comes out ...

.wrap { min-height:100vh; width: 100%; height: 500px; background-image: url("../images/bg_1.jpg"); background-repeat: no-repeat; background-size:cover; } .wrap div:nth-child(1) { position: absolute; width: 570px; height: 106px; left: 100px; padding-top: 102px; font-family: 'pt_serif'; font-style: normal; font-weight: normal; line-height: normal; font-size: 40px; color: #000; } .wrap div:nth-child(2) { position: absolute; width: 575px; height: 142px; left: 101px; padding-top: 234px; font-family: 'pt-sans'; font-style: normal; font-weight: normal; line-height: 31px; font-size: 16px; letter-spacing: 0.01em; color: #000; } 
  <div class="wrap"> <div>Мы вкладываем душу в совершенствование вкуса</div> <div>Мы относимся к своему бренду как к носителю наших уникальных преимуществ и всегда преподносим его "с поля к столу". Мы используем наши уникальные знания и опыт для выращивания и отбора для наших продуктов самых лучших урожаев с плодородных южно-украинских полей. </div> </div>

0