Blockquotes Spacing Issue

Hello,

I wanted to use blockquotes like Time Magazine or some other publication that has interesting excerpts in large quote form in order to peak interest and encourage the reader to keep reading.

So I found this code online:

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: .25em 0;
	padding: .25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background: #ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

And this is the result(Tell me if you cant see it, because I currently have it as a draft rather than published:
https://wp.me/p3SW4x-6e

If you see how the quotes are crammed in with the beginning of the paragraph, that’s my problem.
I tried a bunch of different html codes to have the paragraph start a few lines below the quote to no avail. Or if I could adjust the quote so it allowed a little more room for the paragraph, such as having it start at mid-page so the text in the paragraph wasn’t so crammed to the left.
Googling CSS and HTML only gets me so far.

Also, if this was addressed previously, I tried looking and couldn’t find what I was looking for, so a link to another forum post will do too.
Thank you in advance.