hover over div updates display in spots or intermittently

Question

I’m attempting to implement a hover to display effect for a header. I’ve assigned the :hover selector to a div with width 99% and height 10vh that should be contiguous with the header. The display on hover executes consistently when I hover over the center of the div, intermittently when I hover over the right side of the div and never when I hover over the left side of the div. I added a border to make the boundaries of the :hover div visible.

Shouldn’t hover be active when I hover anywhere over the div?

What am I doing wrong with this set up?

https://codepen.io/ripmurdock/pen/RwjyoqB?editors=1000

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.cc_vert_c1-1 {
  width: 5vw;
  height: 83vh;
  left: 2vw;
  top: 16vh;
  position: absolute;
  overflow: hidden;
}

.cc_hdr_cl-1 {
  position: absolute;
  height: 10vh;
  border-style: dotted;
  border-color: white;
  display: none;
}

.cc_hover {
  position: absolute;
  height: 10vh;
  width: 99%;
  border-style: dotted;
  border-color: white;
}

.cc_hover:hover+#cc_hdr-1 {
  display: block;
}

.cc_hdr_logo_cl-1 {
  width: 40vw;
  max-height: 99.5vh;
  padding-left: 2vw;
  padding-top: 3vh;
}

.cc_horiz_c1-1 {
  width: 48.3vw;
  height: 10vh;
  left: 50vw;
  top: 3vh;
  position: absolute;
}

<div class="cc_vert_c1-1">
  <svg width="100" height="100vh">
    <rect width="100" height="100vh" fill="#fff" />
  </svg>
</div>

<div class="cc_hover"></div>

<div class="cc_hdr_cl-1" id="cc_hdr-1">
  <svg class="cc_hdr_logo_cl-1">
            <rect width="100" height="7vh" fill="#fff" />
    </svg>

  <svg class="cc_horiz_c1-1">
      <rect width="600" height="7vh" fill="#fff" />
    </svg>
</div>