导航的居中对齐未与标题对齐（也居中）

Question

我的导航和标题都设置为对齐中心，但导航被推到比页面上的其他内容更远的位置。我已经尝试将填充和边距更改为0，但它没有帮助。它也发生在我的页脚中的链接，所以我认为它可能与它们是链接这一事实有关。

/*NAVIGATION*/
nav {
    text-align: center;
    background-color: #e4e6e5;
 	width: 100%;
  	border-bottom: solid #05182e 2px;
}
nav li {
    display: inline-block;
    font-size: 35px;
    padding: 15px;
    font-weight: bold;
    vertical-align: middle;
    margin-right: auto;
    margin-left: auto
}

nav a{
	border-radius: 10%;
	padding: 8px;
	background-color: #cccccc;
	color: #1f3b5a;
	text-decoration: none;
	font-size: 30px;
	transition: all 0.5s ease-in-out;
}
nav a:hover{
	font-size: 40px;
	transition: all 0.5s ease-in-out;
}
nav img{
	width: 30%;
	border: none;
	transition: all 0.5s ease-in-out;
}
nav img:hover{
	width: 40%;
	transition: all 0.5s ease-in-out;
}
nav ul {
   margin: 0;
}
nav ul li:last-child a {
  background-color:#e4e6e5; 
} 

/*HEADER*/
section.header{
	margin-top:40px;
	color: #05182e;
	text-align: center;
	font-size: 30px;
	width: 100%;
	font-family: 'Bitter', serif;
	padding:0;
    list-style-type: none;
}

<!-- NAVIGATION -->
	<nav> 
	    <ul> 
	    	<li><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li>
	        <li> <a href="index.html" target="_blank">Home</a></li>
	        <li> <a href="roster.html" target="_blank">Roster</a></li>
	        <li> <a href="schedule.html" target="_blank">Schedule</a></li>
	        <li><a href="http://cwhl.ca" target="_blank"><img src="images/cwhllogo.png"></a></li>

	    </ul>
	</nav>

<!-- HEADER -->
	<section class="header">
	    <h1>
	    	Brampton Thunder
	    </h1>	
	</section>	

Answer 1

添加以下内容，使其不会干扰您的菜单，它应保持居中以下

 nav img{
    width: 30%;
    border: none;
    position: absolute;
    left: 10px;
    top: 10px;
    transition: all 0.5s ease-in-out;
 }