Hello, you could use flexbox inside your .main to centralize
main {
display: flex;
justify-content: center;
align-items: center;
}
It has worked for me when I want the design to be completely centralized on the page.
With your question about the headings from h1 to h6, if the order is important. They are used to define the titles and subtitles of a page. In addition, they are a powerful SEO (Search Engine Optimization) tool since, thanks to these HTML headers, we can provide hierarchy to the information and tell search engines what the content of our website is about.
Follow these best practices and optimize the use of HTML header tags in your code:
- Avoid skipping HTML header levels. That is, always start with <h1>, then use <h2> and so on.
- Avoid using <h1> more than once on a page. This tag is used once to display the page title, followed by the other HTML headers, starting with <h2>.
- You should also not use lower levels to reduce the font size. To do this, apply the CSS font-size property.
Marked as helpful
@Ynotlocin1
Posted
@roraima1986 Thanks for your feedback! I solved the centering problem by adding 'display: flex', 'justify-content'... properties to the <body> tag within the media queries, and it's okay now! :) I wanted it to be centered for the desktop version, not for the mobile one.