flexbox将项目中心与列表项目对齐

Question

嗨，我正在尝试制作一个包含列表项的导航栏。问题是，一旦我尝试使用align-items：center; 导航按钮不会占用容器的全部宽度，而只占用列表内容空间。 有没有一种方法可以使项目对齐以使列表元素居中，而列表元素不会占用内容大小，而是具有某种响应性的灵活宽度。 也许没有人这样做，您可能会暗示什么是最佳做法。

我想要得到的结果是类似屏幕截图，其中的项居中。 enter image description here

body{

font-size: 16px;

}

/*----------------------------background-colors----------------------------------------------*/
header{
	background-color:#87509C;
}
/*--------------------------------------------------------------------------*/
header{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding:20px 2%;

}
header ul{
		display:flex;
		flex-direction:column;
		flex:100%;
		padding-left:0;
	

}
header ul li{
	list-style: none;
	margin:9px 0px;
	text-transform: uppercase;
	font-size:1rem; /*18px/16px*/
	line-height:1.125rem;
	padding-top:10px;
}

header ul li a{

		border: 1px solid black;
		text-align: center;
		text-transform:uppercase;
		text-decoration: none;
		padding-top:10px;
		padding-bottom:8px;
		
}
li {
	display:flex;
	flex-direction:column;
	flex-grow:100%;
}

.logo-image{
	max-width:118px;
}

<header>
							<img src="images/logo.png" alt="website logo" class="logo-image"> 

							<ul>
								<li><a href="#">Homes</a></li>
								<li><a href="#">about</a></li>
								<li><a href="#">work</a></li>
								<li><a href="#">blog</a></li>
								<li><a href="#">contact</a></li>
							</ul>

							<p>	
								Hi there! We are the new kids on the block 
								and we build awesome websites and mobile apps.
							</p>
							<a href="#">Work with us!</a>
					</header>