Having issues with text during desktop view

Im having some issues with my code in desktop and mobile view. I have two cols inline with each other, both col-**-6. In mobile view the element's position is perfect. But in desktop view the text is to the top left of the background image. When I position the text in desktop view to the correct position it messes up the responsive view. What would be the easiest way to accomplish what I want?

Here is the desktop view:

Here is the responsive view:

HTML: The HTML is bootstraps basic carousel

CSS:

/* Top Area */

#top-area {
  min-height: 29em;
  height: auto;
  width: auto;
}

#top-area,
.video-bg {
  background: url("../img/video-bg-left.png") no-repeat left bottom, url("../img/video-bg-right.png") no-repeat right bottom;
}


/* Slider */

#top-area .top-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

#myCarousel {
  display: inline-block;
}

.carousel-inner .item p {
  color: #fff;
  font-family: 'Myriad Pro';
  font-size: 30px;
  width: 12em;
}

.carousel-control.left,
.carousel-control.right {
  background: none !important;
}


/* Video */

#top-area,
.video-bg {
  background: url("../img/video-bg-left.png") no-repeat left bottom, url("../img/video-bg-right.png") no-repeat right bottom;
}