li and p horizontal alignment - html

Question

One of the issues I'm facing now is that I have a flexbox(which should be irrelevant) with an inner div that's horizontally centered in the parent. I want an unordered list to be aligned horizontally with the text in the inner div, but even with text-align: center, it seems to be off by a couple of pixels(to the right) and I cannot figure out why(I can't believe I've never ran into this problem up until now). The '.right' div is actually a child of another element, but that should be irrelevant, so I'll just post the part I actually need. Is this just a product of the ul's initial styles?
.right {
text-align: center;
order: 2;
//background: yellow;
flex-basis: 100%;
height: 100%;
}
.right .headbox{
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list{
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
ul{
list-style: none;
}
.headbox h3{
color: orange;
}
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li>Overview</li>
<li>Hours</li>
<li>Admission</li>
<li>Directions</li>
</ul>
</div>
</div>

Answer 1

Add padding: 0 to your <ul> to override the browser's default styling.

Answer 2

Your <ul> still have the default padding from the browser's default stylesheet.
You can use the padding-left: 0; to disable that padding.
ul{
list-style: none;
padding-left: 0;
}
.right {
text-align: center;
order: 2;
//background: yellow;
flex-basis: 100%;
height: 100%;
}
.right .headbox{
border-bottom: 1px solid orange;
margin: auto;
width: 60%;
height: auto;
}
.right .list{
text-align: center;
margin: auto;
width: 60%;
height: auto;
}
ul{
list-style: none;
padding-left: 0;
}
.headbox h3{
color: orange;
}
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li>Overview</li>
<li>Hours</li>
<li>Admission</li>
<li>Directions</li>
</ul>
</div>
</div>