h1 on body is centered even when i float:left; - html

Question

I'm new to HTML and CSS, I don't know where is the mistake in my code.
So I have a class header-text to show "Welcome to MOK VPS" with h1.
I used float:left; on my CSS code but it stills show the text on the center. But if I use float:right; it moves to the right.
I'm just messing around with HTML and CSS after learning it a few hours and reviewing what I learned.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>

Answer 1

I've added borders around the elements to illustrate what is happening here. Click Run code snippet to see.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
If you look closely, you'll see that the body-text div is actually caught on the header-home div. To prevent that, use clear to cause your div to go to the next line, after any previously floated elements.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
clear: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>

Answer 2

Just change in your CSS for class body-text. "Absolute positioned" element has no positioned ancestors, it uses the document body, and moves along with page scrolling.:
.body-text {
position:absolute;
}

Answer 3

You can simple add the position:absolute on your class body-text. Just add that get you problem fixed. But you also can make this:
.body-text {
position: absolute;
left: ***** Here you define how much you wanna move the tag, for example 20px***
}

Answer 4

You need to style <h1>. Like text-align: left;.
h1{
float: left;
text-align: left;
display: inline-block; /*use this code if needed. It can be replaced with text-align*/
}