Center element horizontally css [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed last year.
I have a basic type-writing element and I am having trouble centering it within a div. I have tried messing around with the margins, the position, the text alignment, all that. I honestly don't know what I'm doing so any help on this would be greatly appreciated.
This is my first time making a website so bear with me, I know this is probably a frequently asked question. I just couldn't find the answer on my own.
html {
background: #545972;
font-family: 'Roboto', sans-serif;
}
.nav {
float: left;
width: 15%;
height: 100vh;
}
.home {
float: left;
width: 85%;
height: 100vh;
}
section::after {
content: '';
display: table;
clear: both;
}
.nav nav h1 {
font-size: 40px;
margin-left: 30px;
position: relative;
}
.nav nav h1 a {
color: #fff;
text-decoration: none;
}
.nav nav ul {
margin-top: 60px;
line-height: 50px;
margin-left: 60px;
}
.nav nav ul li a {
text-decoration: none;
color: #fff;
font-weight: 700;
padding: 10px;
transition: color 0.5s;
}
.nav nav ul li a:hover {
color: rgb(206, 203, 203);
}
.nav nav ul li i {
color: rgb(27, 27, 31);
}
.vl {
border-left: 1px solid rgba(255, 255, 255, 0.25);
height: 100%;
position: absolute;
margin-left: 15%;
top: 0;
}
.home img {
position: absolute;
width: 128px;
height: 128px;
margin-left: 50%;
}
.home .typewriting {
margin: 0 auto;
}
.home .typewriting h1 a {
text-decoration: none;
color: #fff;
}
<section>
<div class="nav">
<nav>
<h1>Ryan</h1>
<ul class="fa-ul">
<li> <i class="fa-li fa fa-home" aria-hidden="true"></i> Home </li>
<li> <i class="fa-li fa fa-user" aria-hidden="true"></i> About </li>
<li> <i class="fa-li fa fa-briefcase" aria-hidden="true"></i> Services </li>
<li> <i class="fa-li fa fa-graduation-cap" aria-hidden="true"></i> Experience </li>
<li> <i class="fa-li fa fa-code" aria-hidden="true"></i> Projects </li>
<li> <i class="fa-li fa fa-comments" aria-hidden="true"></i> Contact </li>
</ul>
<div class="vl"></div>
</nav>
</div>
<div class="home">
<img src="images/logo.png">
<div class="typewriting">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Private Ryan" ]'>
<span class="wrap"></span>
</a>
</h1>
</div>
</div>
</section>

Answer 1

Add text-align: center on h1 element. Worked for me.

Answer 2

I believe that you are looking for the css property text-align. This property can position text center, left, right, or justify. For more information click here.