title: How to keep carousel arrows in the center even after zoom in/out, or update browser windows size?
body: <p><a href="https://codepen.io/sn4k3eye/project/editor/Akyrky" rel="nofollow noreferrer">Fiddle</a> </p>
  
  <p><a href="https://i.stack.imgur.com/yVNW4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yVNW4.png" alt=""></a>
  I have a chart, and my goal is to place the carousel left, right always verical aline center (50% from the top), and position both arrows about 5% away, but close enough to the graph. </p>
  
  <p>I have a hard time getting this to work.
  I've tried </p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"&gt;
      &lt;div class="panel panel-filled"&gt;
          &lt;div class="panel-body carousel"&gt;
  
              &lt;h1&gt;Network Bandwidth&lt;/h1&gt;
  
  
              &lt;div id="chart1Carousel" class="carousel slide" data-ride="carousel"&gt;
  
                  &lt;!-- Wrapper for slides --&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;&lt;div class="chartjs-size-monitor"&gt;&lt;div class="chartjs-size-monitor-expand"&gt;&lt;div class=""&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="chartjs-size-monitor-shrink"&gt;&lt;div class=""&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  
                          &lt;small class="lastSelectedMenu"&gt;
                              &lt;span&gt; Current Interval:
                                  &lt;span class="lastSelected" style="color: rgb(255, 235, 59);"&gt;day (3/25/2020)&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;select name="last" class="float-right"&gt;
                                  &lt;option id="default" value="default"&gt;Select Interval&lt;/option&gt;
                                  &lt;option value="day"&gt;Day&lt;/option&gt;
                                  &lt;option value="week"&gt;Week&lt;/option&gt;
                                  &lt;option value="month"&gt;Month&lt;/option&gt;
                                  &lt;option value="year"&gt;Year&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/small&gt;
  
                          &lt;canvas width="558" height="279" id="chart1" style="display: block; width: 558px; height: 279px;" class="chartjs-render-monitor"&gt;&lt;/canvas&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Left and right controls --&gt;
                  &lt;a class="left carousel-control" href="#chart1Carousel" data-slide="prev"&gt;
                      &lt;span class="fa fa-chevron-left"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;"&gt;
                      &lt;span class="fa fa-chevron-right"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>@media screen and (min-width: 768px)
  /*    .carousel-control .fa-chevron-left {
      margin-left: -10px;
  }*/
  @media screen and (min-width: 768px)
  .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
      position: absolute;
      width: 30px;
      height: 30px;
      font-size: 30px;
      top: 50%;
  
  }
  .carousel-control .fa-chevron-left {
      margin-left: -70px;
      margin-top: 120px;
  }
  
  .carousel-control .fa-chevron-right{
      margin-right: -1200px;
      margin-top: 120px;
  }
  
  .carousel {
      position: relative;
  }
  
  .carousel-inner {
      position: relative;
      width: 100%;
      overflow: hidden;
  }
  
  .carousel-control.left, .carousel-control.right {
      background: none;
  }
  
  .carousel-control {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 30px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      background-color: rgba(0,0,0,0);
      filter: alpha(opacity=50);
      opacity: .5;
  }
  </code></pre>
  
  <hr>
  
  <p><a href="https://codepen.io/sn4k3eye/project/editor/Akyrky" rel="nofollow noreferrer">https://codepen.io/sn4k3eye/project/editor/Akyrky</a></p>
  
  <p>If you can spot my issue base on looking at my HTML &amp; CSS, please say something.</p>