Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. https://i.sstatic.net/7AbdL.png
Actual Result: However, what I ended up with looks more like the image below. https://i.sstatic.net/nrQZf.png
This is my HTML:
<div class="heading-container d-flex flex-row justify-content-start">
<h1 class="main-heading"> Finding Nemo </h1>
<button class="button"> Watch Now </button>
</div>
And here is my CSS:
.heading-container {
margin-top: 20px;
}
.main-heading {
color: #ffffff;
font-family: "Roboto";
font-size: 24px;
font-weight: bold;
}
.button {
background-color: #ffffff;
color: #ff8348;
border-width: 0px;
border-radius: 10px;
height: 32px;
width: 110px;
font-size: 13px;
}