With *{text-align: center} a map I am using from Mapbox goes halway off the screen , with html{text-align: center} it aligns perfectly. Weird. And fascinating. Can anyone shine a light on this? Thank you for your help.

the *{} selects all elements and all it's children elements where html{} only selects the <html> element

see example

<!DOCTYPE html>
<html>
<head>
<style>
html {
    border: solid 2px orange;
}

* {
    border: solid 2px green;
    font-size: 1.2em;
}
</style>
</head>
<body>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  </li>
</ul>

<p>lorem ipsum</p>

</body>
</html>