CSS Layout Project Best City Guide: Why does the anchor tag need a display block and text-align center?

Hello, treehouse community! I am working on the CSS Layout Project in the CSS Layout Basics course. The project is called Best City Guide. I am confused about a block of code. It works, but I don't understand why it works. Could anyone explain this to me? I would so appreciate it! Thank you!

My question: To center the list items in the main-header, why do I need to use both text-align center AND display block? Why can't I just use text-align center? I tried, it doesn't work. What is it about display block that makes the list items align center? I thought display block makes elements stack on top of each other.

This code works, but can anyone explain to me why it works?

style.css:

.name a, .main-nav a { text-align: center; display: block; padding: 10px 15px; }

index.html:

<header class="main-header"> <div class="container clearfix"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </div> </header><!--/.main-header-->