Text alignment issue in a quote banner - html

Question

as you can see on this JSFiddle and on picture below, I'm struggling to get the signature placed as I want in my banner (I want it at the bottom right of the blue banner without interfering with the quote text alignment). The issue that I have is that with my current code the second line of the text is not perfectly aligned horizontally to the middle of the block (there's more space to the right than to the left).
How could I fix this and have full control on the signature position?
Many thanks,
HTML:
<div class="block blueback center">
<h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
</div>
CSS:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
}
.white { color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
display: inline;
}
.center {
vertical-align: middle;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
.signature {
display: inline;
margin-top: 20px;
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
background: #0064C4;
}

Answer 1

They're interfering with each other because they're both set to be inline display. Floating the signature to the right starts on the same line as the quote. Thus the float ends up reducing the amount of width the quote perceives that it has, and a visually off-center center is the result.
I am not sure why inline is necessary. You could leave them both as block display and then align the quote's text to the right.
CSS:
.white {
color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
padding: 0;
margin: 0;
}
.signature {
font-size: 12px;
color: #fff;
text-align: right;
font-weight: 700;
padding: 0;
margin: 0;
}
JSFiddle adjustment
If you compare it with yours, it looks visually the same (except the quote text is now centered).

Answer 2

You can use negative margins:
.signature{
margin-right: -20px;
}
But I would move the padding from the outer div to be margins of inner h2 and used margin-left on class signature:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
}
.signature{
margin-left: <put here>
}

Answer 3

You also need to define float: left; for your white class as you have defined float: right; for your .signature and other things you can manage such as margins and paddings.
demo