I've been struggling to align elements to the right side of the page using various methods like float and flex, but nothing seems to work. To make it easier to understand my issue, I've attached a picture that illustrates what's going on. I'm not sure if there's an error in my code, so I'd appreciate some help troubleshooting this problem. Thank you!
https://i.sstatic.net/sqjRh.png
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.";
}
}