I'm looking to arrange my header ('Sail away today with Starboard Rentals.') and link buttons on top of each other. I want the navigation buttons to be positioned below the h1 on the lower half of the 'home-jumbo' div. What's the best way to separate these two elements and place the nav buttons underneath?
I attempted to position the jumbo-btns separately, but my CSS doesn't seem to be working.
return (
<div className="home-div">
<div className="home-jumbo">
<h1 className="jumbo-header">
Sail away today with StarboardRentals.
</h1>
<div className="jumbo-btns">
<Link to="/rent" className="jumbo-btn">
Rent
</Link>
<Link to="/about" className="jumbo-btn">
About us
</Link>
</div>
</div>
<div className="card-deck">
<div className="boat-cards">
<BoatCard addToCart={addToCart} />
</div>
</div>
</div>
)
.home-jumbo {
width: 80%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
box-shadow: 0px 1px 3px 0px;
border-radius: 1%;
background-image: url("/public/img/home-bg.jpg");
background-size: cover;
}
.home-div {
margin-top: 3%;
margin-bottom: 10%;
height: 100vh;
width: 100vw;
}
.jumbo-btns {
}