The DIV box get cut off at the beginning of the page

Question

The DIV box I created is cut off at the beginning. I defined the height to auto, so the page can scroll in the mobile version and the width to 85vw, but the image at the top of the page is getting cut off.

I define the height and width, but it doesn't work. Moreover, I centered the box at the beginning with position: absolute and transform property, but then changed it to display: flex as it was suggested on the Internet, but still nothing. Adding margins also didn't work.

Here is part of the code:

body {
  background-color:  hsl(233, 47%, 7%);
  padding: 0;
  margin: 0;
  font-family: 'Lexend Deca', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
 }

.main-container {
  width: 85vw;
  height: auto;
  background-color: hsl(244, 38%, 16%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}