Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up at the bottom of the page instead. Any suggestions on how to address these issues?
html {
width: 100%;
height: 100%;
}
.container-fluid {
overflow: hidden;
}
.desk {
width: 100vw;
height: 70vh;
}
.book {
flex-direction: flex-start;
position: absolute;
width: 10vw;
height: 10vh;
}
.logo {
position: absolute;
top: 10vh;
font-family: 'Roboto', sans-serif;
}
.search {
padding-left: 75vw;
bottom: 65vh;
}
.popular {
margin: 0 auto;
bottom: 30px;
}<body>
<div class="container-fluid">
<div class="row">
<img src="./images/desk.png" class="desk">
<div class="col book">
<img src="./images/book.png" class="book">
<h1 class="logo">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div class="row">
<h1 class="popular">Most Popular Subjects</h1>
</div>https://i.sstatic.net/DSAWi.jpg https://i.sstatic.net/5eugE.png
Trying to understand if there's a way to manage heights more effectively within Bootstrap or if I'm missing something in the organization of my HTML and CSS files.