左对齐列表中的一个元素<ul>

Question

我正在建立一个个人网站，并且正在创建一个导航栏。我的导航栏包含一个中心列表，我想在左侧的导航栏中输入我的名字。这是我的实际代码：

:root{
...
}
body{
...
}
nav{
...
}
ul{
    margin: 0;
    padding: 0;
    display: flex; /*dispose element in a row*/
    justify-content: center;
}	
li {
...
}
a {
...
}
a:hover{
...
}
</style>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    rel="stylesheet"/>

    <nav>
	<ul>
		<li>MyName</li>
		<li><a id="navHomeText" href="main.html">Main</a></li>
		<li><a id="navBlogText" href="blog.html">Blog</a></li>
		<li><a id="navContactsText" href="contacts.html">Contacts</a></li>
		<li><a id="navCVText" href="cv.html">CV</a></li>
	</ul>
    </nav>

	

这是使用jquery在所有网站页面中加载的html文件。

这就是我想要的：