Edit Print Layout

I know this topic has come up before and you all are working on it for Cobalt 9, and I have read what I can find on it here and through the external links that have been shared. But I must be missing something or just not understanding it, because no matter what adjustments I add into my custom .scss file, I cannot seem to get anything to work on adjusting the layout of the physical printing. I would be thrilled to get the layout all pretty, but would be satisfied for now to have it so the comment box, the print button, and my chat button do not appear on the printed version.

Here is what already comes in my main template's bootstrap.min.css file:

@media print {
* {
    background: transparent none repeat scroll 0 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
}
a, a:visited {
    text-decoration: underline;
}
a[href]::after {
    content: " (" attr(href) ")";
}
abbr[title]::after {
    content: " (" attr(title) ")";
}
.ir a::after, a[href^="javascript:"]::after, a[href^="#"]::after {
    content: "";
}
pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
}
thead {
    display: table-header-group;
}
tr, img {
    page-break-inside: avoid;
}
img {
    max-width: 100% !important;
}
@page {
    margin: 0.5cm;
}
p, h2, h3 {
    orphans: 3;
    widows: 3;
}
h2, h3 {
    page-break-after: avoid;
}
}

Any suggestions? I am using RocketTheme Callisto v.1.1.2 and Gantry v.5.1.5.

Thank You! Angela