html - 无法弄清楚如何设置文本样式

Question

我正在尝试设置此文本的样式，但出于某种原因，我无法弄清楚为什么我的样式不起作用。我对 html 和 css 并不陌生，所以我真的不知道为什么我尝试的一切都不起作用。在我对我的 css 进行一些更改之前它可以工作，但是现在当我向它添加样式时它不起作用

这是我的CSS:

.text-size{
    margin-top:20px; 
    font-size: 27px;
    border-bottom: 1px solid #DBDBDB;
    font-weight: bold;

}

.row{
    margin-top: 10px;
}

.mission{
    font-size: 20px;
}

.space{
    margin-top: 15px;
}

.btn{
    margin-top: 15px;
}

.btn-primary{
        color: #000 !important;
    background-color: #7ed321  !important;
    border-color: #7ed321  !important;
    font-family: Arial Rounded MT Bold;
    font-weight: bold !important;
 }

.line{
      overflow: hidden;
  text-align: center;
}
.who-we-are{
    font-family: Roboto Condensed;
  font-weight: bold;
    font-size: 25px;
    margin-top: 15px;
    display: inline-block;
  padding: 0 15px;
  position: relative;
 }

.who-we-are:before, 
.who-we-are:after {
  background: #ddd;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 96%;
}

.who-we-are:before {
   right: 100%;
}

.who-we-are:after {
  left: 100%;
}

.our-work{
  margin-top: 20px;
}

.view-btn{
  margin-top: 20px;
}

.inner-caption{
  background-color:rgba(0, 0, 0, 0.5);
  border-radius: 5px;  
  padding-top: 5px;
  padding-bottom: 10px;
}

.carousel-caption{     
      right: 15% !important;
      left: 57% !important;
      top: 12% !important;
}

.btn-shadow{
  -webkit-box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
}

.carousel-head{
  font-family: Roboto Condensed;
  font-weight: bold;
}

.carousel-body{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.part2{
  background-color: #EEEEEE;
  // width:100%;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;

}

.resize-image{
   border: 3px solid #000;
    padding: 0 !important;
   margin-bottom: 10px;
    margin-top: 10px;

}

.program-item{
    margin-bottom: 25px;
  }

  .col-xs-12{
    padding:0 !important;
  }



h3 {
    font-size: 24px;
    font-weight: bold;
    font-family: Roboto Condensed;
}

.program-text{
  font-family: Roboto Condensed;
  font-weight: bold;
  font-size: 25px;
}

这就是我想要设计的风格:

h3 {
    font-size: 24px;
    font-weight: bold;
    font-family: Roboto Condensed;
}

这是我的 html:

<h3 class="zip-text text-center">We have partnered with Zip Zap Zop: Improv for Kids! Click <a href=" http://www.zipzapzopimprov.com/" target="_blank">here</a> to learn more</h3>
<a href=" http://www.zipzapzopimprov.com/" target="_blank"><img class="center-block" src="/wp-content/themes/creativeforces/images/zip.jpeg" alt="" /></a>

我还尝试将样式添加到 .zip-text 类，但仍然不起作用

如有任何帮助，我们将不胜感激!

Answer 1

您确定您在这段 html 片段之前/之后的标记是完整的(没有遗漏结束标记)吗？虽然从我通过浏览器图片看到的内容看起来是正确的，但某些浏览器可能会采用正确的标记。