我目前正在尝试填充标题和导航之间的空白。我是 HTML 和 CSS 新手，所以请原谅我缺乏知识。
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
header h4 {
margin: 0;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
overflow-x: auto;
}
nav a {
padding: 10px 20px;
color: white;
text-decoration: none;
}
nav a:hover {
background-color: #555;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
.containers {
display: flex;
justify-content: space-between;
align-items: center;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="containers">
<header>
<h4>Infrastructural Company</h4>
</header>
<nav>
<a href="#home" onclick="showTab('home')">Home</a>
<a href="#services" onclick="showTab('services')">Services</a>
<a href="#projects" onclick="showTab('projects')">Projects</a>
<a href="#contact" onclick="showTab('contact')">Contact</a>
</nav>
</div>
我尝试添加 CSS 规则来重置 :
内元素的边距了解更多关于 flex;
.containers {
display: flex;
flex-direction: column; /* Stack items vertically */
justify-content: flex-start; /* Align items to the top */
align-items: center;
background-color: #f0f0f0; /* Visualizing */
}我添加了
flex-direction: column;justify-content: flex-start;随意调整背景颜色和其他样式以符合您的设计偏好。