Html – Image, text and background not responsive to a change in screen size

Whenever I change my screen size, the text and image is not responsive to that change.

Also whenever I want to add a scroll – the background acts weird and doesn’t show the whole page.

Image 1:
Scrolling horitzontally

Image 2:
Changing screen size and text isn’t showing properly

Html:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<div class='comicContainer'>

    <div class='comicBackground'>
        <img src='Images/test1.jpg'></img>
    </div>

    <div class='comicImage'>
        <img src='Images/test1.jpg'></img>
    </div>

    <div class='comicText'>
    <h1>Impact Winter</h1>
    <h2>Published: 26 June 2016</h2>
    <h3 style='font-size: 22px;'>
        Writer: Travis Beacham
    </h3>
    <h4 style='font-size: 22px;'>
        Penciler: Stephen Green
    </h4>
    <h5 style='font-size: 22px;'>
        Cover Artist: Stephen Green
    </h5>
    <p class='breakLine'>In the British countryside, a band of survivors has formed a resistance in the fallout shelter of a medieval castle. Among them is Darcy, a young, headstrong fighter waiting for the chance to prove she can be on the front lines.</p>
    <br>
    <button><center>BUY</center></button>

  </div>
  </div>

CSS:

body{
    margin: 0px;
    background-color: rgb(237, 237, 237);
    overflow-x: hidden;
}

header {
    font-family: 'Anton';
    font-size: 45px;
    color: white;
    transition: 0.5s;
}


.comicBackground img {
    width: 100%;
    height: 85%;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;

    filter: brightness(20%);
  }

.comicImage img {
    width: 250pv;
    height: 350px;

    position: relative;

    top: -530px;
    right: -20px;
}

.comicText {
    float: left;
    position: relative;
    top: -890px;
    right: -350px;

    color: white;
    font-family: 'Roboto Condensed';
}

.comicText button {
  width: 160px;
  height: 44px;

  border: 3px solid purple;
  background-color: transparent;

  color: white;
  font-family: 'Roboto Condensed';
  font-size: 20px;
  font-weight: 700;
  transition: 0.2s;
}

.comicText button:hover {
  background-color: purple;
}

  @media screen and (max-width: 2000px) {
    .comicBackground img {
        width: 100%;
        height: 105%;
        background-position: center;
        background-repeat: no-repeat;
        filter: brightness(20%);
      }
  
      .comicImage img {
        width: 350px;
        height: 450px;
    
        position: relative;
    
        top: -710px;
        right: -100px;
    }
    
    .comicText {
        float: left;
        position: relative;
        top: -1170px;
        right: -500px;
        color: white;
        font-family: 'Roboto Condensed';
    }
      
  }
  
  @media screen and (max-width: 600px) {
    .comicBackground img {
      width: 100%;
      height: 120%;
      background-position: center;
      background-repeat: no-repeat;
      filter: brightness(20%);
    }

    .comicImage img {
        width: 250px;
        height: 350px;

        position: relative;
         top: -120px;
         right: 120px;
    
        transform: translate(65%, -200%);
    }

    .comicText {
        float: left;
        position: relative;
        top: -820px;
        right: -50px;
    
        color: white;
        font-family: 'Roboto Condensed';
    }
  }


  .breakLine {  
    width: 700px;
    word-wrap: break-word;
}

I tried to change the properties based on screen size – i.e for mobile screen size, I changed the orientation of the text + image – but it doesn’t really work at all.