CSS - Align element to the right of the page - html

Question

I have a problem with aligning elements to the right of the page as I did use several methods such as float, flex, but none of them work. For easier to understand, I included the picture so that it can describe what I mean. I don't know is there any wrong with my code so can someone help me to solve the problem? Thank you for your help
Home.js:
import React from 'react';
import "./homeStyle.css";
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
import "./components/containers/Menu.css";
import "./homeScript";
import { Widget } from '#typeform/embed-react'
import logo from "./components/img/logo.png";
export default function Home() {
return(
<div>
<div className='App tc f3'>
<Navbar bg='dark' expand='lg'>
<Navbar.Brand href="">
<img src={logo}/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className='ml-auto'>
<Nav.Link href="#home"><button type="button">Login</button></Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
<section id="home">
<div className="inner-width">
<div className="content">
<h1 />
<div className="buttons">
<button>Not Prepare to Part Yet? Click to Learn More</button>
</div>
</div>
</div>
</section>
</div>
)
}
CSS:
*{
margin: 0;
padding:0;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
#home .inner-width {
display: flex;
align-items: center;
justify-content: right;
height: 100%;
text-align: center;
}
#home .content {
width: 100%;
color: white;
float: right;
}
#home .content h1 {
font-size: 60px;
margin-bottom: 60px;
}
#home .content h1::after {
content: " Family ";
animation: textAnim 10s linear infinite;
}
#keyframes textAnim {
25% {
content: " If not Now, When ? ";
}
50% {
content: " Just in case. ";
}
75% {
content: " For your loved one.";
}
}

Answer 1

Try using css properties position: relative and position: absolute for aligning item.
Short explanation. Position relative is assigned to parent, in this case you can assign to section home. Then, position absolute is assigned to child that want to be aligned. After that, for child element you can use positioning properties like right, top, bottom and left to adjust the positioning.
For example
#home {
position: relative;
width: 100%;
height: 90vh;
}
.content {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}