HTML页面CSS样式未生效的问题排查与解决求助

我在Microsoft Visual Studio Code中创建了扩展名正确的分离式HTML与CSS文件，尝试为section元素、.home-content下的h3、h1、p元素，以及.social-media下的a元素设置如下样式，但页面未呈现任何样式变化。我尝试增减类选择器前的"."符号，问题仍未解决，请问该如何修复？

我的CSS代码： #

section {
  min-height: 100vh;
  padding: 10rem 95 2rem;
}

.home-content h3 {
  font-size: 3.2rem;
  font-weight: 700;
}

.home-content h1 {
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-content p {
  font-size: 1.6rem;
}

.social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: .2rem solid var(--main-color);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--main-color);
  margin: 3rem 1.5rem 3rem 0;
}

我的HTML代码： #

<section class="home" id="home">
  <div class="home-content">
    <h3>Hello, It's Me</h3>
    <h1>Simone Marino</h1>
    <h3> And I'm a <span> Data Analyst</span></h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos veritatis obcaecati consequatur eveniet id illo optio placeat nemo aspernatur magnam? Sunt velit nihil impedit quisquam accusantium aspernatur est explicabo. Vitae!</p>
    <div class="social-media">
      <a href="#"><i class='bx bxl-facebook' ></i></a>
      <a href="#"><i class='bx bxl-twitter' ></i></a>
      <a href="#"><i class='bx bxl-instagram-alt' ></i></a>
      <a href="#"><i class='bx bxl-linkedin' ></i></a>
    </div>
    <a href="#" class="btn"> Download CV</a>
  </div>
</section>

• 确保CSS文件被正确引入：在HTML的<head>标签内添加<link>标签引入CSS文件，路径要和文件实际位置匹配。比如CSS和HTML在同一文件夹时：

  <head>
    <!-- 其他meta标签等 -->
    <link rel="stylesheet" href="styles.css"> <!-- 替换成你的CSS文件名 -->
  </head>
  

  如果CSS在子文件夹（比如css/目录），路径要写成href="css/styles.css"。

• 修复CSS语法错误：section选择器里的padding: 10rem 95 2rem;缺少单位，浏览器会忽略这个属性，修正为带单位的值，比如：

  section {
    min-height: 100vh;
    padding: 10rem 9.5rem 2rem; /* 添加rem单位，数值可根据需求调整 */
  }
  

• 定义自定义CSS变量：代码中使用的var(--main-color)未定义，需在CSS开头添加变量声明，比如：

  :root {
    --main-color: #007bff; /* 替换成你需要的颜色值，比如蓝色、红色等 */
  }
  

  没有定义的话，浏览器会用默认值，可能导致边框和文字颜色不明显甚至看不到变化。

• 保留正确的选择器写法：你当前的选择器（比如.home-content h3）是正确的，不需要增减类选择器前的.符号，保持现有写法即可。

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