Explaining the header tag

I am working on a personal project as I learn html and css and I was trying to center a navigation bar I had created and I couldn’t get it right. Eventually by sheer accident I was working on trying to center the header and created a header class in css and suddenly my navigation bar was centered. Not sure why that works now and want to understand.

<header>
				Hello World	
					<nav>
						<ul>
							<li><a href="Home.html">Home</a></li>
							<li><a href="Images.html">Pictures of apples</a></li>
							<li><a href="History.html">History of apples</a></li>
							<li><a href="Games.html">Games</a></li>
						</ul>
					</nav>
			</header>

the first part is my html

header{			
		}
		
		header nav ul {
			list-style-type: none;
			margin: 0px auto;		
			text-align: center;
		} 
		 header nav li {
			display: inline;
			padding: 8px;
			font-size: 32px;
		}

this is the code from my stylesheet. No idea why it works and why the header wont center when i give the header class an text-align: center; line of code

I’m probably going to bungle this explanation up a bit because it’s a bit archaic. HTML elements don’t always respond to styling because they are required by the browser to be defined in their spec.

header is a an HTML5 element and support is fairly new, and can still be wonky in some browsers. While it should be a block level element…this doesn’t always happen, and depending on the browser you’re using it may not display correctly until the browser can tell it has been defined.

A space you are centering needs to have dimensions to be able to center. Usually this means you may have to set a display to force block and/or a width. In some cases just declaring in CSS lets the browser assume it has been defined even if you didn’t define anything.

That being said, it is best practice to set something on your parent elements and not let the browser decided what to do on it’s own.

In older versions of IE this was known as hasLayout and used to drive us completely nuts.

Hope that helps.

So I need to define the parent elements dimensions in my css like

header {
width: 500px;
}

I imagine that this is giving the header element a width of 500px and so then it can actually center the elements nested inside the box with the width of 500 px?
I’m having trouble creating layouts for web pages I don’t fully understand what it takes to create an organized website with an header footer aside bar and articles. I’ve watched videos but I get confused when it comes down to the css. Could you suggest any exercises I can do better practice this skill? Thank you very much for taking the time to respond as well.