Не работает отзывчивая высота и не могу найти правильный ответ

Привет, у меня есть вопрос, и я не могу найти ответ, который работает здесь. Я делаю простой сайт-портфолио со слайд-шоу. В слайд-шоу есть стрелки, а также маленькие точки / цифры внизу, чтобы выбрать, к какой фотографии перейти. Теперь я пытаюсь сделать так, чтобы поле («основное») соответствовало высоте экрана, чтобы мое слайд-шоу было отзывчивым (стрелки внизу экрана, а не по бокам, когда вы делаете экран меньше). Тем не менее, у меня много проблем! Каким-то образом мой основной экран больше высоты моего экрана, поэтому всегда появляется скроллер. Я не знаю, как я могу это решить. Как мне сделать мой основной во всю высоту моего экрана? На мобильном это даже не половина экрана, а на моем ноутбуке он слишком большой...

.menu {
	width:10%;
	border: 1px solid red;
}

.main {
  max-width:100%; 
  width: 90%;
  display: inline-block;
  float: right;
  border: 1px solid red;

}

<main> 
	<div class = "main">
<div class = "slideshow-container">

<!-- Full-width images with number and caption text -->
  <div class = "mySlides fade">
    <div class = "numbertext">1 / 3</div>
    <img src = "3D/ogen.jpg" id = "ogen">
  </div>

	<!-- The dots/circles -->
<div style = "text-align:center">
  <span class = "dot" onclick = "currentSlide(1)"></span> 
  <span class = "dot" onclick = "currentSlide(2)"></span> 
  <span class = "dot" onclick = "currentSlide(3)"></span> 
</div>	
	 
  <!-- Next and previous buttons -->
  <a class = "prev" onclick = "plusSlides(-1)">&#10094;</a>
  <a class = "next" onclick = "plusSlides(1)">&#10095;</a>
</div>
<br>


	</div> 
	
	</main>
	

Кстати, я только начинаю, извините, если это действительно простой вопрос с простым решением. Я просто не могу понять это.