html - 我不能更改左侧边栏的背景颜色吗？

我无法在引导程序3中更改左侧边栏背景颜色。我已经使用！important了，但是什么也没发生。我使用了class或id，但是无法更改左侧边栏的背景颜色。我想更改左侧边栏的背景颜色。我使用了ID backg，但没有任何反应。请帮我！！！！！！！！！！！！！！！
 码：

body {
  position: relative;
}

ul.nav-pills {
  top: 20px;
  position: fixed;
}

div.col-sm-9 div {
  height: 250px;
  font-size: 28px;
}

.bg-1 {
  background-color: #f1c40f;
}

.bg-1 ul li {
  color: #ecf0f1;
  font-family: 'Gugi', cursive;
  font-size: 20px;
}

.bg-2 {
  width: 82%;
}

.col-sm-3 {
  width: 18% !important;
}

#backg {
  background-color: #16a085 !important;
}

@media screen and (max-width: 810px) {
  #about,
  #education,
  #certifications,
  #skills,
  #projects,
  #experience,
  #interest {
    margin-left: 150px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row bg-1">
    <div class="col-sm-3 text-center" id="backg">
      <nav id="myScrollspy">

        <ul class="nav nav-pills nav-stacked ">
          <img class="img-rounded img-responsive center-block" src="naqqash.png" height="200" width="200">
          <li class="active"><a href="#about">ABOUT</a></li>
          <li><a href="#education">EDUCATION</a></li>
          <li><a href="#certifications">CERTIFICATIONS</a></li>
          <li><a href="#skills">SKILLS</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="#experience">EXPERIENCE</a></li>
          <li><a href="#interest">INTEREST</a></li>
        </ul>
      </nav>

    </div>

    <div class="col-sm-9 bg-2">
      <div id="about">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="education">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="certifications">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="skills">
        <h1>Section 4</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="projects">
        <h1>Section 5</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="experience">
        <h1>Section 6</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="interest">
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div>
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>

最佳答案

请尝试风箱样式

    #backg ul{
      background-color: #16a085 !important;
    }