Problems formatting in HTML - html

Question

The headertext font size changes but it won't be centered. Only just started learning HTML so this is likely a rookie mistake. Any advice is appreciated, thanks!
.main {
margin-left: 220px; /* Same as the width of the sidenav */
margin-top: 20px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
}
.main headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<headertext>ExampleTitle</headertext>
<p>Welcome to my website.</p>
</div>

Answer 1

headertext is not a valid HTML element. Change it to a div with a class of headertext and I think that fixes your issue, snippet below:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.main .headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<div class="headertext"> ExampleTitle </div>
<p> Welcome to my website.</p>
</div>

Answer 2

Your problem is there is no <headertext> element. You need to use <h1> (biggest) to <h6> (smallest). If you want it centered, use the following CSS:
h1 {
margin-left: auto;
margin-right: auto;
}

Answer 3

Actually, if you want to it to act as a title (semantically) you should probably give it a h1 tag instead. Like so
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
h1 {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
This will tell the browser and people who use screenreaders that it's actually a title. You may benefit from reading up on html tags. This is a useful link and whilst it may seem overwhelming, you'll get used to it pretty quickly. https://www.w3schools.com/tags/ref_byfunc.asp

Answer 4

There is no element called headertext. Instead you can user header which is whole wrapper in standard or h1/h2/h3/h4/h5/h6 which are commonly used to represent headings.
In your code if you want to follow the first heading you can follow the following code:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.header-text {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
But it seems in-align with other contents. I guess you are looking for the following.
.main {
/*margin-left: 220px;*/ //remove this line
margin-top: 20px;
font-size: 20px;
text-align: center; //added this line
}
.header-text {
font-size: 45px;
/* text-align: center; */
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
I added both way that you can try for now. But still there is many ways to give you a solution. Happy journey on HTML,CSS