css works in Firefox, not in Chrome

Question

I recently adjusted the width of a div via css. It works in Firefox, but not in Chrome.

Here's the code:

.the_content {
    padding-left: 60px !important;
    padding-right: 40px !important;
}

.the_content {
    padding-left: 60px !important;
    padding-right: 40px !important;
}

.the_content.post.type-post.hentry.excerpt.clearfix {
    padding-left: 60px;
    padding-right: 40px;
}

Am I missing something that Chrome isn't picking up?

Thanks,

Answer 1

Provide HTML for more clarity on the issue. You repeated the css classes in multiple places.

Try this:

.the_content
 {
 padding-left: 60px !important;
 padding-right: 40px !important;
 }

 .the_content.post.type-post.hentry.excerpt.clearfix {
  padding-left: 60px;
  padding-right: 40px;
 }

Answer 2

The first line in your posted code

.the_content post type-post hentry excerpt clearfix /* Remove spaces if this is a single class style. if multiple user ","*/

Doesn't have opening and closing curly brackets, this will render all the settings below it useless.

if your going to have a blank link but with the style names

.the_content post type-post hentry excerpt clearfix {} /*<------------*/
.the_content {
    padding-left: 60px !important;
    padding-right: 40px !important;
}

.the_content {
    padding-left: 60px !important;
    padding-right: 40px !important;
}

.the_content.post.type-post.hentry.excerpt.clearfix {
    padding-left: 60px;
    padding-right: 40px;
}