la hauteur sensible ne fonctionne pas et ne trouve pas la bonne réponse

Bonjour, j'ai une question et je ne trouve pas de réponse qui fonctionne ici. Je crée un site de portfolio simple avec un diaporama. Le diaporama a des flèches et aussi ces petits points / nombres en dessous pour choisir la photo sur laquelle aller. J'essaie maintenant de faire en sorte que la boîte ("principale") corresponde à la hauteur de l'écran pour que mon diaporama soit réactif (flèches en bas de l'écran au lieu de sur les côtés lorsque vous réduisez l'écran). Cependant, j'ai beaucoup de problèmes! D'une manière ou d'une autre, mon principal est plus grand que la hauteur de mon écran, donc il apparaît toujours un défilement. Je ne sais pas comment je peux résoudre ça. Comment faire pour que mon écran principal soit sur toute la hauteur de mon écran? Sur mobile, ce n'est même pas la moitié de l'écran et sur mon ordinateur portable, il est trop grand ...

<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>
	

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

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

}

Je ne fais que commencer btw, désolé si c'est une question vraiment facile avec une solution facile. Je n'arrive tout simplement pas à comprendre.