title: Cannot override inline CSS from web page template
body: <p>I am having a difficult time overriding the inline styling for a web page that started as a free HTML template. I have tried using the &quot;!important&quot; keyword, but it is not overriding it. When I inspect the element in Chrome, I can turn off the &quot;element.style&quot; section for the &quot;padding-top: 164px&quot;, but I cannot get rid of it in CSS. I am a beginner so I am sure I am just missing something, but I do not know what else to search for.</p>
  <p>To clarify, the problem is an inline style that sets a div's top padding to 164px, and I want it to be less.</p>
  <p>The html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Senkadagala&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,500,700' rel='stylesheet' type='text/css'&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/main.css&quot;&gt;
  
  
  
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/singlepagenav.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/queryloader.js&quot;&gt;&lt;/script&gt;    
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;description&quot; content=&quot;Senkadagala - a simple HTML template&quot;&gt;
      &lt;meta name=&quot;keywords&quot; content=&quot;web design, web development, branding, Social media marketing, print media design, digital design, HTML,CSS,XML,JavaScript&quot;&gt;
      &lt;meta name=&quot;author&quot; content=&quot;PixelMock&quot;&gt;
  
      &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot;  href=&quot;img/fav.png&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;navbar navbar-inverse navbar-fixed-top top-nav&quot; role=&quot;navigation&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;navbar-header&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
              &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
              &lt;p class=&quot;slogan&quot;&gt;&quot;Members First, Service Always.&quot;&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot;&gt;
            &lt;ul class=&quot;nav navbar-nav&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#services&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#calendar&quot;&gt;Calendar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#intranet&quot;&gt;Intranet&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Here is the area in question:</p>
  <pre><code>    &lt;div class=&quot;content&quot;  id=&quot;home&quot;&gt;
          &lt;div class=&quot;section section1&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;img src=&quot;img/TransPatriotLogo.png&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;h4 class=&quot;bodytext&quot;&gt;Symitar for Windows 2&lt;/h2&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;h5 class=&quot;bodytext&quot;&gt;
                          © 2016 - Patriot Federal Credit Union
                      &lt;/h5&gt;
                      &lt;h5 class=&quot;bodytext&quot;&gt;
                          All Rights Reserved
                      &lt;/h5&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>The next section that should not be important:</p>
  <pre><code>        &lt;div class=&quot;section section2&quot; id=&quot;services&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;div class=&quot;row&quot; id=&quot;services-row&quot;&gt;
                      &lt;h3 id=&quot;services-title&quot;&gt;Services&lt;/h3&gt;
                      &lt;p&gt;
                          Services go here.
                      &lt;/p&gt;
  
                      &lt;p&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ultricies felis. Fusce sed nisi velit. Quisque cursus pharetra diam, non congue ligula sodales at. Phasellus sodales sem sagittis arcu vulputate dictum. Vestibulum faucibus malesuada risus. 
                      &lt;/p&gt;
  
  ...continued...
  </code></pre>
  <p>Here is the CSS:</p>
  <pre><code>body
  {
      text-align: center;
      padding: 0px;
      margin: 0px;
      font-family: &quot;Roboto&quot;,sans-serif;
      font-size: 12px;
      color:#d3d3d3 !important;
  }
  
  body .text-color1 
  {
      color: #882565;
  }
  
  body .text-color2 
  {
      color: #C54D8D;
  }
  
  .container
  {
      /*width:1200px;*/
      margin: 0px auto;
      /*text-align: left;*/
  }
  
  .top-nav
  {
      position: fixed;
      height: 70px;
      padding-top: 10px;
      padding-bottom: 10px;
      width:100%;
      background-color: #f8f8f8;
  }
  
  .top-nav li a
  {
      font-size:16px;
      font-family: &quot;Roboto&quot;;
      font-weight: bold;
      color:#0e3d83 !important;
  }
  
  .slogan
  {
      color: #0e3d83;
      font-family: &quot;Monotype Corsiva&quot;;
      font-weight: bold;
      font-size: 26px;
      margin-top: 15px;
  }
  
  .bodytext
  {
      color: #0e3d83;
      font-family: &quot;Trebuchet MS&quot;;
      font-weight: bold;
  }
  
  .navbar li .current
  {
      background-color: transparent;
      color: #d92727 !important;
      outline: none;
  }
  
  .navbar-brand
  {
      padding-top: 0px;
  }
  
  .top-nav li a:hover
  {
      color:#C54D8D!important;
  }
  
  .navbar-inverse
  {
      border: none;
      box-shadow: 0px 1px 5px #0e3d83;
  }
  
  .content
  {
      padding-top:70px;
  }
  
  .section1
  {
      background: url(../img/whiteflag.png);
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:50% -400px;
  }
  
  .logo-row
  {
      padding-top: 0px;
  }
  .section1 .main-logo
  {
  /*  background: url(&quot;../img/TransPatriotLogo.png&quot;) no-repeat scroll center center rgba(0, 0, 0, 0);
      height: 200px;
      width: 500px;
      margin-left: auto;
      margin right: auto; */
  }
  
  .section1 h2
  {
      color: #0e3d83;
      font-family: &quot;Trebuchet MS&quot;;
      font-weight: bold;
  }
  
  .section1 p
  {
      font-size: 20px;
      color: #0e3d83;
      font-family: &quot;Trebuchet MS&quot;;
      font-weight: bold;
  }
  
  .section2
  {
      padding-top: 100px;
      /*padding-bottom: 200px;*/
  }
  
  .section2 .intro-text
  {
      /*text-align: left*/
  }
  
  .section2 img
  {
      margin: 0 auto;
  }
  
  .section2 h3#services-title
  {
      font-family: &quot;Roboto&quot;, sans-serif;
      font-size: 34px;
      color: #0e3d83 !important;
      font-weight: 300;
      margin-bottom: 40px;
  }
  
  .section2 .team
  {
      padding: 150px 0px 100px 0px;
  }
  
  .section2 .team img
  {
      margin:0px auto;
  }
  
  .section2 .team h3.team-name
  {
      color:#848484;
      margin-bottom: 5px;
  }
  
  .section2 .team h4.team-subtitle
  {
      margin-top: 0px;    
      font-weight: lighter;
      color:#848484;
      margin-bottom: 20px;
  }
  
  .section2 .team p.team-details
  {
      text-align: center;
      font-size: 16px;
  }
  
  .section2 p
  {
      color: #848484;
      font-size: 18px;
      font-family: &quot;Roboto&quot;, sans-serif;
      margin-bottom: 20px;
      font-weight: 300;
      text-align: left
  }
  
  .section3
  {
      background: url(../img/workspace-sub.jpg) rgba(213,30,155, 0.6);
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:50% 0%; 
      padding-top: 200px;
      padding-bottom: 200px;
  }
  
  .section3 .container
  {
      
  }
  
  .section3 img.img-responsive
  {
      margin: 0 auto;
  }
  
  .section3 h3
  {
      color: #848484;
      font-weight: 400;
  }
  
  .section3 p
  {
      color: #848484;
      font-weight: 300;
      font-size: 18px;
  }
  
  .section4
  {
      /*height:600px;*/
  }
  
  .item 
  { 
      width: 20%; 
      background-color: red;
      height:300px;
      float:left;
      position: relative;
  }
  
  .item.w2 
  { 
      width: 25%; 
  }
  
  .item.w3
  {
      width: 40%; 
  }
  
  .item .hidden-item
  {
      display: none;
  }
  
  .portfolio
  {   
      padding: 100px 0px
  }
  
  .portfolio #portfolio-introduction
  {
      margin-bottom: 100px;
      margin-top: 100px;
      color: #828282;
  }
  
  .portfolio #portfolio-introduction p
  {
      font-size: 24px;
      font-weight: lighter;
  }
  
  .portfolio #portfolio-items
  {
      border-top: 1px solid #D6D6D6;
      border-bottom: 1px solid #D6D6D6;
  }
  
  .portfolio .item .hover-content
  {
      width: 100%;
      height: 100%;
      background: #8a0175;
      opacity: 0.8;
      position: absolute;
      padding: 20px;
      display: none;
      transition:all 0.5s ease 0s;
      cursor: pointer;
  }
  
  .portfolio .item .hover-content h3
  {
      font-size: 34px;
      font-weight: lighter;
      color: #fff;
      position: relative;
      top:30%;
  }
  
  .portfolio .item:hover .hover-content
  {
      display: block;
  }
  
  .portfolio .item  .portfolio-popup h3
  {
      margin-bottom: 30px;
      margin-top: 0px;
      color:#828282;
  } 
  
  .portfolio .item .portfolio-popup p
  {
      color: #828282;
      line-height: auto;
      font-size: 18px;
      font-weight: lighter;
  }
  
  
  .portfolio .item .portfolio-popup .popup-image-container
  {
      padding: 20px;
  }
  
  .portfolio .item .portfolio-popup .popup-image-container img
  {
      margin: 0 auto
  }
  
  .portfolio .item  .portfolio-popup .portfolio-item-description
  {
      border-bottom: 1px solid #8D8D8D;
      padding: 40px;
      text-align: left;
  }
  
  .portfolio .item .portfolio-popup .labels
  {
      margin-top:20px;
      line-height: 30px;
  }
  
  
  .portfolio .item  .portfolio-popup .portfolio-item-description span.label
  {
      font-family: &quot;Roboto&quot;, sans-serif;
      font-size: 12px;
      font-weight: lighter;
  }
  
  .portfolio h3
  {
      font-size: 60px;
      font-family: &quot;Roboto&quot;, sans-serif;
      font-weight: lighter;
  }
  
  .footer
  {
      background: url(../img/footer-bg.jpg) repeat-x left bottom #000;
      /*padding-top: 200px;*/
  }
  
  #contact
  {
      /*padding-bottom:80px;*/
      font-family:&quot;Roboto&quot;, sans-serif;
      font-weight:300;
      min-height:600px;
  }
  
  #contact #contact-us-header
  {
      font-size: 44px;
      font-weight: lighter;
      margin-bottom: 50px
  }
  
  #contact #contact-form input[type=submit]
  {
      background-color:#C54D8D;
      border:1px solid #882565                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
  }
  
  #contact #contact-form
  {
      text-align: left;
  }
  
  #contact #contact-form label
  {
      font-size: 16px;
      font-weight: lighter;
  }
  
  #contact .contact-description p
  {
      font-size:20px;
  }
  
  .sm-wrapper
  {
      margin-top:30px;
      margin-bottom:50px;
  }
  
  
  .sm-wrapper a:hover
  {
  
  }
  
  .sm-container
  {
      width:32px;
      height:32px;
      display:block;
      float:left;
      background:url(../img/sm-sprite.png) no-repeat;
      margin-right:10px;
  }
  
  .sm-container:hover
  {
      /*border-bottom:5px solid #C54D8D;*/
      cursor:pointer;
  }
  
  .sm-facebook
  {
      background-position:0px -32px;
  }
  
  .sm-linkedin
  {
      background-position:0px -64px;
  }
  
  .sm-gplus
  {
      background-position:0px -96px;
  }
  
  .sm-skype
  {
      background-position:0px -128px;
  }
  
  
  /* end of contact section */
  
  
  
  /* Landscape phones and down */
  @media (max-width: 480px) { 
  
      .section2 p
      {
          font-size: 18px;
          font-weight: 300;
      }
  
      .section2 img
      {
          padding-bottom: 60px;
      }
  
      .item,.item.w2 , .item.w3
      { 
          width: 100%; 
      }
  
      .portfolio .item  .portfolio-popup h3
      {
          font-size: 42px;
      } 
  
      .portfolio .item .portfolio-popup p
      {
          font-size: 16px;
          font-weight: lighter;
      }
  
      .section2 .team img
      {
          padding-bottom: 0px;
      }
  
      .section3 .service-item
      {
          margin-bottom: 50px
      }
  
      .section3 .service-item p
      {
          font-size: 18px;
          margin: 0 auto;
          width: 75%;
      }
  
  
   }
  
  /* Landscape phone to portrait tablet */
  @media (min-width: 481px) and (max-width: 767px) {
      .section3 .service-item
      {
          margin-bottom: 50px
      }
  
      .section3 .service-item p
      {
          font-size: 18px;
          margin: 0 auto;
          width: 75%;
      }
  
      .section2 p
      {
          font-size: 20px;
          font-weight: 300;
      }
  
      .section2 img
      {
          padding-bottom: 0px;
      }
  
      .item,.item.w2 , .item.w3
      { 
          width: 100%; 
      }
  
      .navbar-nav
      {
          background-color:#F8F8F8
      }
  }
  
  
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 1024px) {
      .section2 img
      {
          padding-bottom: 60px;
      }
  
      .section2 p
      {
          font-size: 20px;
      }
  
      .section2 img
      {
          padding-bottom: 0px;
      }
  
      .section3 .service-item
      {
          margin-bottom: 50px;
          font-size: 18px;
      }
  
      .portfolio .item .hover-content
      {
          width: 100%;
          height: 100%;
          background: #8a0175;
          opacity: 0.8;
          position: absolute;
          padding: 20px;
          display: none;
          transition:all 0.5s ease 0s;
          cursor: pointer;
      }
  
      .portfolio .item .hover-content h3
      {
          font-size: 18px;
          font-weight: 300;
          color: #fff;
          position: relative;
          top:30%;
      }
  
      .portfolio .item:hover .hover-content
      {
          display: block;
      }
  
      .portfolio .item  .portfolio-popup h3
      {
          margin-bottom: 30px;
          margin-top: 0px;
          color:#828282;
          font-size: 42px;
      } 
  
      .portfolio .item .portfolio-popup p
      {
          color: #828282;
          line-height: auto;
          font-size: 16px;
          font-weight: lighter;
      }
  
      .item 
      { 
          width: 20%; 
          background-color: red;
          height:200px;
          float:left;
          position: relative;
      }
  
      .item.w2 
      { 
          width: 25%; 
      }
  
      .item.w3
      {
          width: 40%; 
      }
  
      .navbar-nav
      {
          float: right;
      }
  }
  
  /* Large desktop */
  @media (min-width: 1025px) {
      .navbar-nav
      {
          float: right;
      }
  }
  
  .clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: &quot; &quot;;
       clear: both;
       height: 0;
       }
  .clearfix { display: inline-block; }
  /* start commented backslash hack \*/
  * html .clearfix { height: 1%; }
  .clearfix { display: block; }
  /* close commented backslash hack */
  </code></pre>