<div class="container container-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque facere molestias iste cum dolores, inventore hic. Quia hic eius maxime repellat beatae placeat dolorem illo nesciunt molestias. Molestiae officia sint, tempora ipsam laboriosam! Quod sapiente
    necessitatibus est pariatur sequi, itaque tempora blanditiis placeat excepturi! Sed, debitis, eum. Quas, dolorem, suscipit?</p>
</div>

<div class="container container-2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque facere molestias iste cum dolores, inventore hic. Quia hic eius maxime repellat beatae placeat dolorem illo nesciunt molestias. Molestiae officia sint, tempora ipsam laboriosam! Quod sapiente
    necessitatibus est pariatur sequi, itaque tempora blanditiis placeat excepturi! Sed, debitis, eum. Quas, dolorem, suscipit?</p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Neucha&display=swap");

:root {
  --content-width: 600px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Neucha", cursive;
  overflow-x: hidden; /*необходим для второго блока*/
}

.container {
  background-color: #eee;
  outline: 1px dashed #000;
}

.container-1 {
  display: flex;
  max-width: var(--content-width);
  margin: 50px auto;
}

.container-1::before {
  content: "";
  display: block;
  width: 50vw;
  margin-left: calc(50% - 50vw);
  background: deepskyblue url(https://cdn.gidfon.com/preview/4695.jpg) no-repeat center /
    cover;
}

.container-1 p {
  width: 50%;
  padding: 20px;
}

.container-2 {
  display: flex;
  max-width: var(--content-width);
  margin: 50px auto;
}

.container-2::after {
  content: "";
  display: block;
  width: 50vw;
  margin-right: calc(50% - 50vw);
  background: deepskyblue url(https://cdn.gidfon.com/preview/4695.jpg) no-repeat center /
    cover;
}

.container-2 p {
  width: 50%;
  padding: 20px;
}