Need help with CSS grid (resizing width with vw)

HTML-CSS
1

I am building a page with CSS grid, on super small screens I want the user to be able to scroll the content from left to right.

When I set my width to 200vw (50 columns x 4 vw), the content scales, but the container still stays the same and the background gradient around the content container doesn’t scale (no background on the right)

What am I missing?

Here is the link to the website: perezagruzka9. ru / stein (can’t post proper links yet, so please remove the spaces)

45

HTML:


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
   <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="container">
      <div id="content">
        <div id="label"><p>AUTHOR</p>
        </div>
     <div id="heading"><p>John Steinbeck</p></div>
        <div id="text"><p>John Ernst Steinbeck Jr. (/ˈstaɪnbɛk/; February 27, 1902 – December 20, 1968) was an American author. He won the 1962 Nobel Prize in Literature "for his realistic and imaginative writings, combining as they do sympathetic humour and keen social perception." He has been called "a giant of American letters," and many of his works are considered classics of Western literature.</p> <p>During his writing career, he authored 27 books, including 16 novels, six non-fiction books, and two collections of short stories.</p>
    </div>
        <div id="button"><a href="https://en.wikipedia.org/wiki/John_Steinbeck" target="_blank">FULL BIO</a></div>
        <div id="prize"><img src=""></div>
        <div id="medium_image">
         <img src="https://previews.dropbox.com/p/thumb/AAXuNe699IRkbuL2sd99ZkPk0-MJIS26RTVbd9kEhD5stftIo2iR2DhpUEWqytvAdhPL03GByDU4k0oMo8FmWf7RTo6ejHs9owPhconWAxk4ScCnkwZ8_94Xke15o1dVWbRMhDmg_KdmdUZFZxdJqCwoU6QM2NVG1p2LWoDEvoMKWwNtftXUVArVmBe8Nym1UsghIHTd8NTfPIWtEPs6qqP7TPbjKAxj4YawUvxeyGbHYw/p.jpeg?size_mode=5">
      </div>
      </div>
       <div id="image">
         <img src="">
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-image: linear-gradient(-90deg, #00ADB5, #9FDCDE);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
}

@media all and (max-width: 319px) {
  

  #container {
  display: grid;
  grid-template-columns: repeat(50, minmax(4vw, auto));
  grid-template-rows: repeat(50, minmax(4vh, auto));
}  

     #content {
  grid-column: 5/47;
  grid-row: 3/49;
    }

  #label {
  color: white;
  grid-column: 11/41;
  grid-row: 3/4;
  }

  #label p {
  background-color: black;
  font-size: 14px;
  padding: 8px 16px;
  display: inline-block;
  font-weight: 300;

}

  #heading {
  grid-column: 11/41;
  grid-row: 5/6;
  font-size: 32px;

}

  #medium_image {
  display: block;
  grid-column:5/46;
  grid-row:6/42;
  text-align: center;
}

  #medium_image img { 
  max-height: 100%;
  max-width: 100%;
}

  #text {
  color: #222831;
  grid-column: 6/47;
  grid-row: 43/45;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;

}

  #button {
  color: #91DCDF;
  grid-column: 11/41;
  grid-row: 46/48;
  text-align: center;
  font-weight: 400;
}

  #button a {
  border: solid 2px;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: #91DCDF;
  font-size: 14px;

  }

  #prize {
  display: none;
} 

  }