White space above a container on some pages, not all

Hi there,

This CSS you've already added should fix the issue:

.page-hero .inside-page-hero {
    line-height: 0;
}

However, it's currently only working on the home page.

Is it added in the Additional CSS field in the customizer? If not please try adding it there.

It's got all of this other stuff... Can I add it anywhere, say at the very beginning? Like this?

.page-hero .inside-page-hero {
line-height: 0;
}
/* Peacock Modern style, and Chino flat style */
.vc_btn3.vc_btn3-color-peacoc.vc_btn3-style-modern, .vc_btn3.vc_btn3-color-chino.vc_btn3-style-flat {
font-weight: bold;
}

/* Chino flat font size */
.vc_btn3.vc_btn3-color-chino.vc_btn3-style-flat.vc_btn3.vc_btn3-color-chino.vc_btn3-style-flat {
font-size: 16px;
}

p > a {
text-decoration: underline !important;
}

span.fa, span.fas {
color: #999
}

/* AMP adjustments */
amp-iframe {
height: 0 !important;
width: 0 !important;
margin: -1px !important;
}

@media all and (max-width: 720px) {
.desktop-display {
display: none;
}
}
@media all and (min-width:720px) {
.mobile-display {
display: none;
}
}

/* Flip Boxes */
.flip-box {
background-color: transparent;
height: 300px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
top: 0;
left: 0;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
background-color: #bbb;
color: black;
}

/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/* End Flip Boxes */

@media all and (min-width: 769px) {
.mobile-only {
display: none;
}
}

.mobile-only {
text-align: right;
padding: 10px 20px 5px;
color: blue !important;
font-size: 15px;
font-family: Arial;
}
.mobile-only a {
color: #999;
}
.mobile-only a:hover {
color: #444;
}

@media (min-width: 1100px){
.vc_carousel-slideline .vc_item {
//max-height: 1000px;
}
}

.vc_slide, .vc_slide .vc_carousel-inner, .vc_slide .vc_carousel-inner .vc_carousel-slideline, .vc_slide .vc_carousel-inner .vc_carousel-slideline .vc_carousel-slideline-inner, .vc_slide .vc_carousel-inner .vc_carousel-slideline .vc_carousel-slideline-inner .vc_item, .vc_slide .vc_carousel-inner .vc_carousel-slideline .vc_carousel-slideline-inner .vc_item .vc_inner, .vc_slide .vc_carousel-inner .vc_carousel-slideline .vc_carousel-slideline-inner .vc_item .vc_inner img{
height: auto;
}

@media screen and (max-width: 1023px) {
.ff_conv_app_frame .vff .ff_conv_section_wrapper .ff_conv_input {
margin-top: 0;
margin-bottom: 0;
}
}

Yes, you can add it on top of all other CSS codes.

That did the trick, thank you!!!

No problem :)