PDF Attachment Text Overlaps Sidebars

I don’t know if anyone has come across this before, but I use Coraline for a handful of WordPress websites. I came across a problem recently that I fixed and I wanted to post the solution to help others.

I noticed that when I upload a pdf file to the media library, when I go to the attachment page for the pdf the text goes full width, but the sidebars are still there, so the text and pdf link overlap the sidebars and it looks messy and unreadable. I do not have this problem with jpgs, only pdfs.

Screenshot of the problem

I added this code and it fixed my problem:

.attachment #content {
	overflow: hidden;
}

body.attachment #primary {
	display: none;
}

body.attachment #secondary {
	display:none;
}

body.attachment #comments {
	display:none;
}

body.attachment #content {
		margin: 24pt 0 0;
		width: 100%;
	}

Screenshot After Code Added to Site

Link to Live Site