title: Why doesn't masonry fill the width of container fully?
body: <p>I'm trying to make mega menu. The sub1 menu must have width based on its content (content is other ul's) but not more than max-width ( so i calculate that width using js). And i want the submenu items to be ordered by masonry. So the problem is masonry doesn't fill the container fully.</p>
  
  <pre><code>var maxWidth = $('.parent').outerWidth() -  $('.main').outerWidth();
  var ulWidth = 0;
  $('.sub1 &gt; li').each( function( index, element ){
          ulWidth = ulWidth + $(this).outerWidth();
  });
  var ulWidth = Math.round(+ulWidth) + 1;
  var width1;
  if(ulWidth &lt; +maxWidth) {
    width1 = ulWidth + 'px';
  }
  else {
    width1 = maxWidth + 'px';
  }
  
  $('.sub1').masonry({
    itemSelector: '.maso',
    containerStyle: { 
      position: 'absolute',
      width: width1
      }
  });
  </code></pre>
  
  <p>"Prototype" of my megamenu =)</p>
  
  <p><a href="https://jsfiddle.net/2hjwdkum/1/" rel="nofollow noreferrer">https://jsfiddle.net/2hjwdkum/1/</a></p>