Mobile Header Cropping on Tablet When It is Vertical

I have been searching in the forums for a solution to the mobile header resizing issue. The coding I found here did resolve the issue on my mobile phone (iPhone) but when I am using a tablet in the vertical position, I am still getting the header cropped left and right. I would appreciate any suggestions. Here is the code I have already added to the additional CSS:
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 870px;
}

@media only screen and (max-width:768px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 400px;
}
}

@media only screen and (max-width:480px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 200px;
}
}
@media screen and (max-width: 450px) {

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}
.custom-header {
height: 870px;
}

@media only screen and (max-width:768px) {
.custom-header {
height: 400px;
}
}

@media only screen and (max-width:480px) {
.custom-header {
height: 200px;
}
}

The page I need help with: [log in to see the link]