CSS not working for one section in my HTML code

For some reason, my CSS code doesn't work for the .transform class, but it does for the rest of the code.

HTML code

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Home{% endblock %}</title>
<link rel = 'stylesheet' type="text/css" href="{% static 'change/css/bootstrap.min.css' %}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = 'stylesheet' type="text/css" href='{% static 'change/css/base.css' %}'>
</head>
<body>

<nav class="navbar-fixed-top navbar navbar-default navbar-inverse" id = 'navbar'>
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section id = 'cover'>
    <div id = 'cover-caption'>
        <div class = 'container-fluid'>
            <div class = 'col-md-12' id = 'text'>
                <h1>Get Fit Fast</h1>
                <p>Get a six pack, big arms, wide shoulders in less than 12 weeks.</p>
                <p>Live your life to the fullest!</p>
            </div>
        </div>
    </div>
</section>

{#Jumbotron beginning#}

<section class = 'transform'>
    <div class = 'jumbotron text-center'>
        <h1>Transformations</h1>
        <p class = 'lead'>Following our fitness program will help you lose weight and gain muscle in a short amount of time.</p>
        <p class = 'lead'>But dont take for it!</p>
        <hr class = 'focus'>
            <div class = 'container-fluid'>
               <div class="row">
                  <div class="col-sm-3 row-md-3">
                    <div class="thumbnail change">
                      <img src="{% static 'change/img/ba1.png' %}">
                    </div>
                  </div>

                   <div class="col-sm-3 row-md-3">
                    <div class="thumbnail change">
                      <img src="{% static 'change/img/ba2.png' %}">
                    </div>
                  </div>

                   <div class="col-sm-3 row-md-3">
                    <div class="thumbnail change">
                      <img src="{% static 'change/img/ba3.png' %}">
                    </div>
                  </div>

                   <div class="col-sm-3 row-md-3">
                    <div class="thumbnail change">
                      <img src="{% static 'change/img/ba4.png' %}">
                    </div>
                  </div>
               </div>
            </div>
        <hr class = 'focus'>
        <p>Be quiet, Im doing a toast</p>
        <p class = 'lead'><a href="#" class = 'btn btn-primary btn-lg' role="button">learn more..</a></p>
 </div>
</section>


{#End of jumbotron#}

<section class ='packs'>
    <div class = 'container-fluid'>
       <div class="row">
          <div class="col-sm-4 row-md-4">
            <div class="thumbnail">
              <img src="{% static 'change/img/arms.jpg' %}" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>sss</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>

          <div class="col-sm-4 row-md-4">
            <div class="thumbnail">
              <img src="{% static 'change/img/chest.jpg' %}" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>sss</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>

          <div class="col-sm-4 row-md-4">
            <div class="thumbnail">
              <img src="{% static 'change/img/shoulders.jpg' %}" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>sss</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>
        </div>
    </div>
</section>
</body>
</html>

CSS code

#navbar {
    background: #000000;
}

html, body {

    height: 100%;

}

body{
    padding-top: 50px;
}

#cover {
    background: #222222 url('../img/cover.jpg') center center no-repeat;
    color:white;
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.jumbotron{
    position: relative;
    padding:0;
    margin-top:70px;
    background: floralwhite;
    margin-top: 23px;
    text-align:center;
    margin-bottom: 0;
}
.container-fluid{
    padding:0 ;
}

.col-sm-3{
    background:rgba(157,52,99,0.7);
}

.transform {
    width: 100%;
}

.transform img {
    width: 100%;
    height: 500px;
}

.packs {
    width: 100%;
}

.packs img {
    max-width: 100%;
    height:200px;
}

2 answers

  • answered 2017-06-17 20:05 Akshay Kapoor

    transform is a property name. Change class name to transform1 , that might work.

  • answered 2017-06-17 20:05 Keyur Panchal

    In your css file, you have css for transform written two times. That can be the reason.

    .transform {
        width: 100%;
    }
    .transform {
        width: 100%;
        height: 500px;
    }