How would I achieve this for my testimonial page?

Question

I would like to have quotes with oversized quotation marks at the start and finish of the quote. At the moment the problem I am having is that there is too much spacing. Here is my code:

HTML:
<section class="testimonial">
    <span class="quote">&quot;</span>
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
    </p>
    <div class="last">
        <span class="quote">&quot;</span>
    </div>
</section>

CSS:
/* Testimonials */
.testimonial p {
    margin: 0 12.5% 15px;
    text-align: center;
}

.quote {
    font-family: "times new roman", sans-serif;
    font-size: 5em;
    color: #CC1714;
    display: inline-block;
}

.last {
    text-align: right;
}

Here is what I would like to achieve:

Answer 1

Try with this:

CSS

.testimonial p {
  display: inline-block;
  margin: 0;
  text-align: center;
}

.quote {
     font-family: "times new roman", sans-serif;
     font-size: 5em;
     color: #CC1714;
     display: inline-block;
   }

.last {
     display: inline-block;
     text-align: right;
   }