title: Why do I have an extra dot in my owl carousel navigation?
body: <p>I have a couple of problems with my owl carousel. One being that it isn't responsive at the moment, but that is another issue! At the moment I keep getting 3 dots, however there should only be 2. I want to have 2 items in the middle of the page (I have the max-width of the .owl-carousel set to 500px). Here is my markup:</p>
  
  <pre><code>&lt;div id="owl-cd" class="owl-carousel"&gt;
  &lt;div class="item"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my custom CSS:</p>
  
  <pre><code>#owl-cd .item img{
  margin: 0 auto;
  display: block;
  padding: 0px 0px 10px 0px;
  }
  
  #owl-cd .item {
  padding: 0px 0px 0px 0px;
  color: #686974;
  border: 0;
  max-width: 100%;
  }
  </code></pre>
  
  <p>And my script:</p>
  
  <pre><code>$(document).ready(function() {
    $("#owl-cd").owlCarousel({
    items: 2,
    dots: true,
    margin: 20,
    autoWidth:true,
    center:false,
    }
    );
  });
  </code></pre>
  
  <p>Apologies if I haven't included everything required, I am very new to developing. Just trying out some things but not sure why I am getting 3 dots instead of 2 and why it is not responsive at the moment!</p>