导航栏元素无法显示问题排查求助

我遇到一个奇怪的问题：当我访问home.php和header.php时，CSS样式是生效的，但导航栏里的元素（包括logo图片和导航链接）完全不显示。我检查了代码但没找到问题，希望大家帮我看看哪里出了问题。

我的代码文件如下： #

header.php

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport settings -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Linking an external stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Title of the HTML page -->
<title>Document</title>
<!-- Internal CSS styling -->
<style>
/* CSS styling for the logo in the left section */
.left img{
width: 60px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- Header section with navigation -->
<header>
<nav>
<!-- Left section with logo and salon name -->
<div class="left">
<img src="images/logo.png" alt="logo">
<h2>ILAK BEAUTY SALON</h2>
</div>
<!-- Navigation links in an unordered list -->
<ul>
<li>
<a href="home.php">Home</a>
</li>
<li>
<a href="aboutus.php">About Us</a>
</li>
<li>
<a href="servicesbookings.php">Book Here</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
<!--<li>
<a href="services.php">Services</a>
</li>
<li>
<a href="payment.php">Payment</a>
</li> -->
<li>
<a href="logout.php">Log Out</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

home.php

<?php
include("header-session.php");
?>
<!-- HTML STARTS HERE -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and viewport settings -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the HTML page -->
<title>Home</title>
<!-- Internal CSS styling -->
<style>
body {
/* Styling for the background image */
background-image: url("images/bg.jpg");
background-size: cover;
background-position: center;
height: 100vh;
margin-top: 15%;
margin-bottom: 0;
}
/* Styling for the footer-like container */
.container-footer {
background-color: gray;
display: flex;
width: 100%;
height: 10%;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 0;
padding: 10px;
opacity: .89;
}
</style>
</head>
<body>
<!-- Footer-like container -->
<div class="container-footer">
<h3>A modern concept of a beauty salon and the popular feeling of a day spa.</h3>
</div>
</body>
</html>

session-header.php

<?php
// Include the header file
session_start();
if(!isset($_SESSION["loggedin"])){
include("header.php");
}else{
include("header_signin.php");
}
?>

style.css

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #E5E7E6;
}
body {
background-color: #141301;
color: #E5E7E6;
}
body{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header {
background-color: #fff;
position: fixed;
top: 0;
width: 1000%;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: left;
background-color: #4a4a4a;
padding: 20px;
}
.left {
display: flex;
align-items: center;
}
nav img {
width:  0px;
margin-right: 10px;
}
nav h2 {
font-size: 24px;
}
nav ul {
list-style: none;
display: flex;
align-items: center;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
nav ul li a:hover {
background-color: #6B2B06;
}
.container1 {
height: 100vh;
display: flex;
padding: 50px;
margin-top: 10px;
}
.text {
display: flex;
margin-top: 5%;
width: 65%;
background-color: rgba(74, 74, 74, 0.7);
padding: 60px;
border-radius: 10px;
}
.text img{
padding: 25px;
}
.info span {
color: red;
margin-bottom: 15px;
display: block;
}
.info {
font-size: 18px;
}
.info h3 {
font-size: 30px;
margin-bottom: 15px;
}
.info p {
font-size: 30px;
}
.container-story{
display: flex;
justify-content: center;
}
.text-story {
display: flex;
margin-top: 5%;
width: 65%;
background-color: rgba(74, 74, 74, 0.7);
padding: 50px;
border-radius: 10px;
}
.text-story img {
padding: 36px;
}
.info-story span {
color: red;
margin-bottom: 15px;
display: block;
}
.info-story {
font-size: 18px;
}
.info-story h3 {
font-size: 30px;
margin-bottom: 15px;
}
.info-story p {
font-size: 30px;
}
.container-mission{
display: flex;
justify-content: center;
}
.text-mission {
display: flex;
margin-top: 5%;
width: 65%;
background-color: rgba(74, 74, 74, 0.7);
padding: 50px;
border-radius: 10px;
}
.text-mission img{
padding: 25px;
}
.info-mission span {
color: red;
margin-bottom: 15px;
display: block;
}
.info-mission {
font-size: 18px;
}
.info-mission h3 {
font-size: 30px;
margin-bottom: 15px;
}
.info-mission p {
font-size: 30px;
}
.container-choose{
display: flex;
justify-content: center;
}
.text-choose {
display: flex;
margin-top: 5%;
width: 65%;
background-color: rgba(74, 74, 74, 0.7);
padding: 50px;
border-radius: 10px;
}
.text-choose img{
padding: 25px;
}
.info-choose span {
color: red;
margin-bottom: 15px;
display: block;
}
.info-choose {
font-size: 18px;
}
.info-choose h3 {
font-size: 30px;
margin-bottom: 15px;
}
.info-choose p {
font-size: 30px;
}
.container-visit{
display: flex;
justify-content: center;
}
.text-visit {
display: flex;
margin-top: 5%;
width: 65%;
background-color: rgba(74, 74, 74, 0.7);
padding: 50px;
border-radius: 10px;
}
.text-visit img{
padding: 25px;
}
.info-visit span {
color: red;
margin-bottom: 15px;
display: block;
}
.info-visit {
font-size: 18px;
}
.info-visit h3 {
font-size: 30px;
margin-bottom: 15px;
}
.info-visit p {
font-size: 30px;
}

我初步排查到的几个可疑点： #

• logo图片被强制隐藏：在style.css里有一行nav img { width: 0px; }，这直接把导航栏里的图片宽度设为0，肯定显示不出来！虽然我在header.php的内部样式里给.left img设了60px宽度，但不确定是不是优先级冲突，打算先把这行代码删掉试试。
• header宽度异常：header的样式里写了width: 1000%;，这明显是笔误，应该改成width: 100%;，1000%的宽度会让header超出屏幕范围，导航栏的内容可能被挤到可视区域外面了。
• body的flex布局冲突：body设置了display:flex; flex-direction: column; justify-content: center; align-items: center;，这个布局会让body内的元素居中，但header是fixed定位，理论上不受flex影响，但还是打算暂时注释掉这部分样式看看效果。
• 路径问题：我也不确定images/logo.png的路径是否正确，如果home.php在子目录下，相对路径可能需要改成../images/logo.png，不过CSS是生效的，所以路径大概率没问题，但还是打算验证一下。

麻烦大家帮我看看这些点是不是问题所在，或者还有其他我没注意到的错误？

备注：内容来源于stack exchange，提问作者Sean John Duque