Hello there!
The ul element is a block-level element. According to the MDN reference (source):
A block-level element occupies the entire space of its parent element (container), thereby creating a “block.”
You can see this by giving the <ul> in question a background colour, which spans the entire width of the Bootstrap container that you are using:
<ul style="background: crimson">
<li>Born</li>
</ul>
While this is not the solution I recommend, you can see this a little bit better if you make the ul element an inline-block:
<div class="text-center">
<ul style="display: inline-block; background: crimson">
<li>Born</li>
</ul>
</div>
To achieve what you are trying to do, you could try one of the following suggestions depending on the style that you wish to achieve. This first one make the bullet part of the list content and centers it along with the text—you won’t be using this if you actually want the beginning of each list item to line up though:
<ul class="text-center" style="list-style-position: inside">
<li>Born</li>
</ul>
Alternatively, and since you are using Bootstrap, you can simply place the list inside a column and offset it. Assuming you are using Bootstrap 4.0.0 alpha, you can do the following:
<div class="col-8 offset-2">
<ul>
<li>Born</li>
</ul>
</div>
I hope that helps! 
EDIT: Typo!