floating div elements right - html

Question

I really have a hard time placing a div tag. I need to get my form-box with the yellow border out to the right, and my text Inbound Marketing and subtext in the middle. Can anybody help me through this one?
The text is laying in the div with a green border.
The background picture is laying in the div with a red border
Here is my code what I tried until now.
My code looks like this:
HTML:
<div class="top-area" style="border: 4px solid red;">
<div class="container" style="border: 4px solid green;">
<div class="form-container" style="border: 4px solid yellow;">
<div>
#Umbraco.RenderMacro("Ebook")
</div>
</div>
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
</div>
</div>
CSS
.top-area {
position: relative;
text-align: center;
}
.top-area, .top-area > .container {
min-height: 500px;
display: -ms-flexbox;
display: flex;
}
.top-area > .container {
-ms-flex-align: center;
align-items:center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
}
.top-area p {
margin: 0;
color: #fff;
width: 100%;
}
.top-area .header-xl {
margin-top: 20px;
padding: 0;
}
.top-area .sub-header {
font-weight: 300;
margin-top: 5px;
font-size: 2.8em !important;
}
.form-container {
display: block;
float: right;
float: right;
padding: 20px 0;
width: 320px;
}

Answer 1

I'm not entirely sure that I'm clear on what you're trying to do here, but you can use a display: block; on your .top-area > .container item to move it to the right within the green container. If you wanted it OUTSIDE of the green container and to the right in the red container, then you'd need to move it in the HTML. Right now it's contained in the div with the green border, rather than the red border.