真的在努力掌握窍门。这可能是一件非常简单、非常愚蠢的事情。所以，请解决眼前的问题。
我重新启动了我的投资组合网站，因为我无法找到响应式的设计。我已经完成了从320像素到2560像素的媒体查询，320像素看起来不错，所以我继续下一个查询，以此类推。我以2560像素完成了最后一个查询。我点击查看我的工作，并通过768px再次点击320px。一切都坏了。所以我研究了一下CSS网格，决定重新开始，再试一次。
我在最后一次尝试的学习过程中开始使用SASS。我喜欢它。我意识到我必须预先编译它，因此，我使用了SASS-watch SCSS/SASS:SCSS/CSS它监视我的SCSS文件夹，它有SASS文件夹和我正在处理的styles.SCSS。然后它将其编译为SCSS/CSS/styles.CSS
我可以看到绿色文本"；将SCSS\SASS\styles.SCSS编译为SCSS\CSS\styles.CSS。"所以我可以看到这一步骤正在发挥作用。接下来，我可以看到在styles.CSS 下的CSS文件夹中填充的CSS代码
此外，我可以通过更改标题文本来看到实时重载的工作，例如，通过实时重载可以看到文本的正确更改。
这是代码。感谢您的帮助。我下定决心要得到这个。我知道我要复习一大堆愚蠢的问题，直到弄清楚为止。看起来CSS网格会有所帮助。我只是不明白我做错了什么，因为我以前让SASS正常工作。
// SCSS code
* {
margin: 0;
padding: 0;
}
.skills-container {
border: 1rem solid black;
background-color: red;
}
.technical-skills-h1 {
color: red;
}
// Sections
#technical-skills-section-container {
background-color: red;
}
/* CSS code */
{
margin: 0;
padding: 0;
}
.skills-container {
border: 1rem solid black;
background-color: red;
}
.technical-skills-h1 {
color: red;
}
#technical-skills-section-container {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kyle LeBlanc Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="text/scss" href="./SCSS/SASS/styles.scss">
<link rel="text/css" href="./CSS/stylesheet/styles.css">
</head>
<body>
<nav class="navbar" role="navigation">
<div class="navbar-container">
<!--This is the container and lists for the menu bar and links to various things -->
<div class="nav-menu">
<ul class="navbar ">
<li class="nav-item"> <a class="d-block" href="About.html"><strong>About</strong></a></li>
<li class="nav-item"> <a class="d-block" href="https://github.com/tiberiusnero560?tab=repositories" target='_blank'><strong>Github</strong></a></li>
<li class="nav-item"> <a class="d-block" href="Resume.html"><strong>Resume</strong></a></li>
<li class="nav-item"> <a class="d-block" href="https://www.linkedin.com/in/kylejordenleblanc/" target='_blank'><strong>LinkedIn</strong></a></li>
</ul>
</div>
</div>
</div>
</nav>
<section id="technical-skills-section-container">
<div class="skills-title-container">
<div class="skills-title"">
<h1 class="technical-skills-h1">Technical Skills</h1>
<p>Languages & Technologies</p>
</div>
</div>
<!--Container for the 3 panel skills section -->
<div class="skills-container">
<!--The Center Column of the 3 panel layout -->
<div class="column-center ">
<div class="list-div">
<ul class="unordered-list">
<h2 class="skills-title-h2">Web Development & Backend</h2>
<li class="ListGroup">HTML</li>
<li class="ListGroup">CSS</li>
<li class="ListGroup">JavaScript</li>
<li class="ListGroup">PHP</li>
<li class="ListGroup">MySQL</li>
</ul>
</div>
</div>
<!--The Left Column of the 3 panel layout -->
<div class="column-left ">
<div class="list-div">
<ul class="unordered-list">
<h2 class="skills-title-h2">Software Development</h2>
<li class="ListGroup">C++</li>
<li class="ListGroup">Python</li>
<li class="ListGroup">C#</li>
</ul>
</div>
</div>
<!--The Right Column of the 3 panel layout -->
<div class="column-right ">
<span class="skills-text-area">
<div class="list-div">
<ul class="unordered-list">
<h2 class="skills-title-h2">Frameworks & Libraries</h2>
<li class="ListGroup">React</li>
<li class="ListGroup">JQuery</li>
<li class="ListGroup">Bootstrap</li>
</ul>
</div>
</span>
</div>
</div>
</section>
</body>
</html>知道这很傻。但我很乐意寻求更多的帮助。
对于其他有类似问题的人。这很愚蠢，很基本，一旦你弄清楚了，你就不会再做了！哈哈。我知道我不会。
你的文件夹结构就是一切。正如一位用户指出的那样，我并没有首先展示这一点。那是我应该开始寻找的地方。
不知何故，我在根目录中有第二个名为CSS的文件夹，其中的样式已正确编译。然而，我一直狭隘地认为只使用我创建的SCSS/CSS文件夹，并认为我已经正确链接。始终仔细检查文件夹结构。展开所有文件夹，真正了解您的所有文件夹以及文件夹所在的位置。一旦我知道该去哪里找，这无疑对我有所帮助。
一旦我正确地链接了样式表，砰，我设定的颜色立刻出现了。
我希望这能帮助到像我这样的人。不要害怕寻求帮助。永远不要害怕感到愚蠢或自卑。你不是。你正在学习，这才是最重要的。