Статья шире родительского div

Question

Когда мое окно браузера экрана находится между 992px-1199px, мои элементы статьи шире, чем их родительский div (.wrapper). Поэтому при этой ширине экрана панели перекрываются и выглядят неправильно.

На всех других ширинах экрана мой код показывает, как именно.

Как я могу сделать эти разделители .wrapper по крайней мере столь же широкими, как и их элемент статьи детей все время?

Markup:

<div class="container"> 
<div id="datalist"> 
<div class="row"> 
</div> 
</div> 
</div> 
<script src="js/jQuery/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $.getJSON("articles.json", function(result){ 
     $.each(result, function(i, field){ 
      jQuery('<div/>', { 
       id: 'div'+i, 
       class: 'wrapper col-md-3 col-sm-6 col-xs-12', 
      }).appendTo('.row') 
      jQuery('<article/>', { 
       id: 'article'+i, 
       title: field.title, 
       style: 'background-image: url('+field.thumbnail.url+');', 
       height: field.thumbnail.height, 
       width: field.thumbnail.width, 
       class: 'panel panel-default', 
      }).appendTo('#div'+i) 

      if(field.type === "video"){ 
       jQuery('<img/>', { 
        src: '/img/youtubeIcon.png', 
        class: 'youtubeIcon' 
       }).appendTo('#article'+i) 

       jQuery('<button/>', { 
        id: 'playBtn'+i, 
        class: 'playBtn' 
       }).appendTo('#article'+i) 

       jQuery('<img/>', { 
        src: '/img/playIcon.png' 
       }).appendTo('#playBtn'+i) 
      } 

      jQuery('<div/>', { 
       class: 'panel-heading '+field.type, 
       id: 'panelHeading'+i, 
       title: field.title, 
      }).appendTo('#article'+i) 

      jQuery('<p/>', { 
       text: field.title, 
       class: 'panel-title' 
      }).appendTo('#panelHeading'+i) 

      var updated = '', 
      now = Date.now(), 
      secondsSince = ((now - field.updated)/1000), 
      years = Math.floor(secondsSince/31536000), 
      days = Math.floor((secondsSince % 31536000)/86400), 
      months = days/30, 
      hours = Math.floor(((secondsSince % 31536000) % 86400)/3600), 
      minutes = Math.floor((((secondsSince % 31536000) % 86400) % 3600) /60) 

      if (years > 1){ 
       updated = years + ' years ago' 
      } 
      else if (years > 0) { 
       updated = years + ' year ago' 
      } else if (months > 1){ 
       updated = months + ' months ago' 
      } else if (months > 0){ 
       updated = months + ' month ago' 
      } else if (day > 1){ 
       updated = days + ' days ago' 
      } else if (day > 0){ 
       updated = days + ' day ago' 
      } else if (hours > 1) { 
       updated = hours + ' hours ago' 
      } else if (hours > 0) { 
       updated = hours + ' hour ago' 
      } else if (minutes > 1) { 
       updated = minutes + ' minutes ago' 
      } else { 
       updated = 'A minute ago' 
      } 

      jQuery('<p/>', { 
       text: updated, 
       class: 'updated' 
      }).appendTo('#panelHeading'+i)    
     }) 
    }) 
}) 
</script> 
</body> 
</html> 

CSS:

article { 
    border-radius: 0; 
    text-align: center; 
    position: relative; 
} 
.container{ 
    margin-top: 90px; 
} 
.youtubeIcon { 
    height: 25px; 
    width: 50px; 
    display: inline; 
    position: absolute; 
    top: 1px; 
    left: 2px; 
} 

.playBtn { 
    position: relative; 
    margin-top: 34px; 
    display: inline-block; 
    float: none; 
    background-color: transparent; 
    border: none; 
    vertical-align: middle; 
} 
.playBtn img{ 
    width: 50px; 
    opacity: 0.85; 

} 
.wrapper{ 
    padding: 0; 
} 
.panel-default{ 
    border-radius: 1px; 
    margin: 0; 
    text-align: center; 
} 
.panel-heading { 
    text-align: left; 
    position: absolute; 
    bottom: 2px; 
    left: 0.5%; 
    right: 0.5%; 
    opacity: 0.75; 
    padding: 1px 7px 2px 6px; 
    margin: 0; 
    padding 0; 
} 
@media (min-width: 768px) { 
    article:first-child .panel-heading { 
     left: 0.25%; 
     right: 0.25%; 
    } 
} 
.panel-default>.panel-heading{ 
    background-color: #808080; 
    border-radius: 1px; 
    border: none; 
} 
.panel-heading p{ 
    color: white; 
    font-size: 10px; 
    paddig: 0; 
    margin 0; 
} 
.panel-heading p:first-child{ 
    display: inline; 
} 
.panel-heading p:last-child{ 
    font-size: 8px; 
    padding-top: 2px; 
    float: right; 
} 
.updated{ 
    margin-bottom: 0; 
    right: 0; 
} 

Answer 1

Дайте оберток реагирующие ширины, скажем, ширина: 100% (или любой другой), и пусть дети наследуют это.