How to prevent div from moving when resizing window?

Question

fairly new to CSS and HTML here. I have a few questions:

currently trying to replicate this website , and whenever I resize my window so the width is smaller than my header image (1000px), one of the div starts to move as it tries to stay in the center. Basically I would like to keep all of the text content aligned vertically no matter no big the window size is.

Another question is how do I resize the content of .quote::before . I tried defining width and height , but no success.

Here's a JSFiddle so you can check out the code.

Any help is much appreciated!

Answer 1

To awnser your first question, you need to remove

padding-left and padding-right property from your .main rule.

.main {
  width: 550px;
  margin: 0 auto;
  margin-top: 45px;
  line-height: 25px;
  font-family: 'Josefin Sans';
  color: #222;
}

I let you try this without padding-left and padding-right

To awnser your another question, I guess you should use media queries I let you an example

@media screen and (max-width: 598px) {
  .quote {
    margin: 0 26px;
    width: unset;
  }
}