Testimonial section CSS inheritance and proper use of HTML5 elements

I created this testimonial section as a prototype.

HTML

  
    This was pretty good.
    
      – Bobby, Jersey City, NJ
    
  

  
    This is pizza is the most bearable thing I ever had in Joisey. But it still sucks, just like everyone from there.
    
      – Vinny, New York, NY
    
  

  
    I really savored the smoky undertones of the imported sausage. The cheese had a wonderful texture. It paired well with my pinot noir in a dance of sensations.
    
      – Alex, San Francisco, CA
    
  

CSS

.testimonials {
  width: 720px;
  max-width: 96%;
  margin: 0 auto;
}
.testimonials blockquote {
  background-color: #fff;
  border-left: 4px #61acca solid; 
  font-size: 21px;
  line-height: 1.6;
}

.testimonials blockquote {
  padding: 10px 20px; 
}

.testimonials blockquote {
  background-image: url('http://shared-assets.s3.amazonaws.com/codepen/img/elements/quotes/quote-999.jpg');
  background-repeat:no-repeat;
  background-size: 33px 45px;
  background-position: 10px 5px;
}

.testimonials cite {
  font-size: 0.7em;
  font-style: normal;
}
.author {
  font-weight: bold;
  font-size: 1.3em;
  margin: 0 6px 0 36px;
}
p { margin: 0 0 0 36px; }

Everything looks clean. However, I found some things though:

-
font-size - Make the units consistent. You use px and em. I suggest you go em all the way.

-
background-size - Well, it exists for that reason, but it would be better if you actually sized the image in those dimensions rather than having them resized in CSS.

-
You "namespaced" everything by prefixing .testimonials. That's being a good developer. You're avoiding your styles from clobbering other elements. However, you forgot to do that for .author and p.

StackExchange Code Review Q#49376, answer score: 2