Foundation 6.4: Image Orbit Display Problems

Question

I’m a UX researcher, not a coder and I was hoping for some helpful feedback to make the orbit function work. :

Using: Foundation 6.4 Function: Image Orbiter

Problems: Placing 800 w x 400 h images that I’ve created (via Photoshop), they seem to not “fill” the container the orbiter is providing. The images go to the upper left hand portion of the orbit container and the arrows and bullets look misaligned.

<div class="orbit" role="region" data-orbit data-auto-play="false">
  <div class="orbit-wrapper">
   <div class="orbit-controls">
     <button class="orbit-previous"><span class="show-for-sr">Previous 
      Slide</span>&#9664;&#xFE0E;</button>
     <button class="orbit-next"><span class="show-for-sr">Next 
     Slide</span>&#9654;&#xFE0E;</button>
   </div>

 <ul class="orbit-container">
   <li class="is-active orbit-slide">
    <img class="orbit-image" src="img/Dtotals.png" alt="Totals">
   </li>
   <li class="orbit-slide">
    <img class="orbit-image" src="img/trans.png" alt="Transcripts">
   </li>
  </ul>
 </div>

 <nav class="orbit-bullets">
   <button class="is-active" data-slide="0"><span class="show-for-sr">First 
    slide details.</span><span class="show-for-sr">Current Slide</span> 
   </button>
   <button data-slide="1"><span class="show-for-sr">Second slide details. 
   </span></button>
 </nav>
</div>

How can I get the orbiter to better align to my 800w x 400h image size so that the bullets and arrow controls align appropriately?

Thank you so much!