How to make a button go under a div - html

Question

I am trying to make a button go underneath a div, however, the button float to the left instead of floating to the right. I am trying to achieve something like this:
So far this is what have:
HTML:
<div class="container">
<div class="main">
<div class="sectiontitle">
<h1 class="maintitle">Free Pick-Up<br>and Delivery</h1>
</div>
<div class="sectiondes">
<p class="maintext"> We offer a free pick up and delivery service to your home or place of work.</p>
</div>
<div class="sectionbutton">
<button href="#!" class="button">learn more</button>
</div>
</div>
</div>
CSS:
.container {
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
}
.main{
margin-top: 100px;
background: url("../img/Home-img.jpg");
height: 931.5px;
width: 1920px;
float: right;
}
.maintitle{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 65px;
color: #000;
letter-spacing: 2px;
line-height: 60px;
height: 120px;
width: 641.6px;
margin-top: 121px;
margin-right: 392.4px;
margin-left: 886px;
margin-bottom: 30px;
text-align: right;
}
.maintext{
height: 68px;
width: 489.6px;
margin-right: 392.4px;
text-align: right;
float: right;
font-size: 24px;
color: #000;
letter-spacing: 0;
line-height: 34px;
margin-top:0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-bottom: 30px;
}
.sectionbutton{
float: right;
}
button{
background-color: #1B325F;
font-family: 'Roboto', sans-serif;
font-weight: 700;
border: none;
padding: 13px 28.5px 13px 29px;
float: right;
text-align: center;
text-decoration: none;
border-radius: 2px;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 18px;
color: #ffffff;
letter-spacing: -0.03px;
margin-right: 392.4px;
}
I know for a fact the problem is my CSS but I don't know how to make the button go underneath the other div. The codepen is https://codepen.io/mrsalami/pen/Yxpyop

Answer 1

.container {
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
}
.main{
margin-top: 100px;
background: url("../img/Home-img.jpg");
height: 931.5px;
width: 1920px;
float: right;
}
.maintitle{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 65px;
color: #000;
letter-spacing: 2px;
line-height: 60px;
height: 120px;
width: 641.6px;
margin-top: 121px;
margin-right: 392.4px;
margin-left: 886px;
margin-bottom: 30px;
text-align: right;
}
.maintext{
height: 68px;
width: 489.6px;
margin-right: 392.4px;
text-align: right;
float: right;
font-size: 24px;
color: #000;
letter-spacing: 0;
line-height: 34px;
margin-top:0px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-bottom: 30px;
}
.sectionbutton{
clear: both;
float: right;
}
button{
background-color: #1B325F;
font-family: 'Roboto', sans-serif;
font-weight: 700;
border: none;
padding: 13px 28.5px 13px 29px;
float: right;
text-align: center;
text-decoration: none;
border-radius: 2px;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 18px;
color: #ffffff;
letter-spacing: -0.03px;
margin-right: 392.4px;
}
<div class="container">
<div class="main">
<div class="sectiontitle">
<h1 class="maintitle">Free Pick-Up<br>and Delivery</h1>
</div>
<div class="sectiondes">
<p class="maintext"> We offer a free pick up and delivery service to your home or place of work.</p>
</div>
<div class="sectionbutton">
<button href="#!" class="button">learn more</button>
</div>
</div>
</div>