Container width + margin-left does not show all images while sliding

$(document).ready(function() {

  calculate_width();

  $('#moveleft').click(function() {
    var loga = $('#marki #loga');

    if ($('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()) {
      loga.animate({
        'margin-left': "-=100px"
      });
    }
  });
  $('#moveright').click(function() {
    var loga = $('#marki #loga');

    if (parseInt(loga.css('margin-left')) < 0) {
      loga.animate({
        'margin-left': "+=100px"
      });
    }
  });
});

function calculate_width() {
  var szerokosc = 0;

  $('#loga a img').each(function() {
    szerokosc += $(this).outerWidth(true);
  });
  $('#marki #loga').width(szerokosc);
}

#marki .container {
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#marki #loga {
    font-size: 0px;
}

#marki a {
    display: inline-block;
    margin: 0 30px 0 0;
    line-height: 50px;
    text-decoration: none;
}

#marki a:last-of-type {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marki">
  <div class="container">
    <div id="loga">
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
    </div>
  </div>
</div>
<div style="padding:20px;">
  <button id="moveright" style="float:left;"><<</button>
  <button id="moveleft" style="float:right;">>></button>
</div>