Caret编辑器中justify-content: space-around失效问题求助

一、justify-content: space-around失效的核心原因 #

你的CSS中定义的容器类是.tc-container，但HTML里对应的容器用的是tcc-container（多了一个字母c），类名不匹配导致flex布局根本没被应用，所以justify-content: space-around自然不会生效。编辑器高亮消失大概率是编辑器的语法识别小问题，但功能失效的根源是类名错误。

修复方法：把HTML里的<div class="tcc-container">改成<div class="tc-container">，这样CSS的flex样式就能正确作用到容器上，justify-content: space-around也会正常工作。

二、代码中的其他问题及修复建议 #

HTML部分 #

• 重复的<title>标签：页面里有两个<title>，保留一个即可，比如<title>Registered Nursing - Home Page</title>。
• meta标签拼写错误：<meta name="viewport" content="width=device-width, initial-sclae=1.0">里的initial-sclae应该是initial-scale。
• IE兼容标签错误：<meta http-equiv="X-UA-Compatible" content="IE-edge">里的IE-edge应为IE=edge（半角连字符）。
• 语义错误：<nav>里的<li>没有用<ul>包裹，正确结构应该用<ul>包裹所有<li>。
• 废弃标签：<font>是HTML废弃标签，建议用CSS设置字体大小。
• 拼写错误：Registred改为Registered，elgible改为eligible，found out改为find out。
• 内联样式与CSS冲突：HTML里的logo图片有内联样式width:200px;height:200px，覆盖了CSS里的.tc-logo img { width:5rem; }，如果想统一用rem单位，建议删除内联样式。

CSS部分 #

• 错误的选择器：a href { ... }是无效选择器，应该改成a { ... }，这样Montserrat字体才能应用到链接上。
• nav布局补充：给导航的<ul>添加display:flex; gap: 2rem;来控制导航项间距，提升美观度。
• 全局样式优化：把box-sizing: border-box;放到全局选择器里，避免每个元素单独设置：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

三、修复后的示例代码 #

修复后的HTML #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
    <title>Registered Nursing - Home Page</title>
    <style>
      body {
        background-color:rgb(175, 213, 252);
      }
      @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
    </style>
  </head>
  <body>
    <header class="tc-header">
      <div class="tc-container">
        <div class="tc-logo">
          <img src="rnlogo.png" alt="Logo">
        </div>
        <nav class="tc-nav">
          <ul>
            <li> <a href="#">Home</a></li>
            <li> <a href="#">Education</a></li>
            <li> <a href="#">More Info</a></li>
            <li> <a href="#">Usage</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <script src="script.js"></script>
    <header style="color:White;">
      <strong>A Highly Respected Career</strong>
    </header>
    <h1>Registered Nursing</h1>
    <img src="talking.jpg" alt="Group of Nurses Talking" class="center">
    <p> A registered nurse is a nurse that has passed the NCLEX-RN exam, and achieved their certification. They're eligible to work in many different departments such as the ER, mental health unit, schools, and so much more. Continue to explore this site to find out more!</p>
    <a href="Education.html">2 |</a>
    <a href="TasksandSalary.html">3 | </a>
    <a href="How.html">4 |</a>
  </body>
</html>

修复后的CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  text-align:center;
  font-size:8.7rem;
  background-color:White;
  color:rgb(175,213, 252);
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

p {
  color:White;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0 2rem;
}

a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  color: #fff;
}

.tc-header {
  width: 100%;
  background-color: rgb(255, 255, 255);
}

.tc-container {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem 0;
}

.tc-logo img {
  width: 5rem;
}

.tc-nav ul {
  list-style: none;
  display:flex;
  gap: 3rem;
}

.tc-nav a {
  color: #333;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
}

内容的提问来源于stack exchange，提问作者Student