<main> element is not centered

Code Help HTML/CSS/JS
1

Question:
The <main> element is not centered on the page, I’ve tried margins, normal centering, but nothing works. Why?
Repl link: https://replit.com/@element1010/Elemental-Conquest

main {
  width: 80%;
  border: 10px solid #a86b00;
  text-align: center;
  position: absolute;
  top: 10%;
  margin-left: 10vw;
  margin-right: 10vw;
  padding: 20px;
}
2

Need to test but I think its an issue with units. When using % its the percentage of the parent element and not of the full page. So 80% does not equal 80vw. If you set it all to one common unit it may fix the issue.

2 Likes
3

Nope, changing 80% to 80vw doesn’t work.

4

I think the code you are looking for is this:

main {
  width: 80vw;
  border: 10px solid #a86b00;
  text-align: center;
  margin:auto;
  padding: 20px;
}