Over-riding bootstrap template CSS

Question

I am using a bootstrap template that has a stylesheet called styles.css. I want to modify the following class in styles.css

.contact {
    background-color: #56bc94;
    color: #fff;
    padding: 80px 0;
}

I created a common.css that I place after styles.css and added the following

.contact {
   background-color: #f5f5f5;
   padding: 80px 0;
}

However, it's not over-riding the styles.css class. I tried with !important as well, but doesn't work.

.contact {
  background-color: #f5f5f5 !important;
  padding: 80px 0;
}

Answer 1

In common.css use:

@import url("styles.css");
.contact {background-color: #f5f5f5; padding: 80px 0;}