Styler un widget de boutique pour avoir une apparence complètement différente

Question

J'ai un widget de magasin qui n'est pas le plus attrayant que je reçois de mon réseau d'affiliation, mais je voudrais changer l'apparence de celui-ci pour le rendre plus propre et plus agréable. Si vous visitez le jsfiddle et supprimez le css, vous pouvez voir le widget original. En ce moment je viens d'utiliser le développeur chrome et css pour changer l'apparence du widget. Mais je suis coincé en ce moment parce que je ne peux pas comprendre comment ajouter de l'espace entre les différents éléments dans le widget. Je voudrais 4 ou 5 articles par rangée avec un peu d'espace entre eux. Un peu comme ce site (https://thestylescribe.com/shop/) mais sans la bordure noire et l'info de vol stationnaire. Elle utilise le même widget que moi, donc je sais qu'il est possible de le styliser différemment. Quelqu'un peut-il m'aider à le faire ressembler à ceci.

jsFiddle - https://jsfiddle.net/rayfm9cp/

.bo-garden { 
 
    margin: 0 auto !important; 
 
    width:100% !important; 
 
    overflow: visible !important; 
 
    min-width:700px !important; 
 
} 
 
.bo-box { 
 
    background: none !important; 
 
    border: none !important; 
 
} 
 
.bo-con:after, .bo-con:before { 
 
    background: none !important; 
 
} 
 
img.bo-img{ 
 
    width: 200px !important; 
 
    height: 300px !important; 
 
}

<div class="boutique-widget" data-widget-id="625672"><script type="text/javascript">!function(d,s,id){var e, p = /^http:/.test(d.location) ? 'http' : 'https';if(!d.getElementById(id)) {e = d.createElement(s);e.id = id;e.src = p + '://' + 'widgets.rewardstyle.com' + '/js/boutique.js';d.body.appendChild(e);}if(typeof window.__boutique === 'object') if(d.readyState === 'complete') {window.__boutique.init();}}(document, 'script', 'boutique-script');</script><div class="rs-adblock"><img src="//assets.rewardstyle.com/production/c108ac3fc3225bcc7f580567db42a46920d79336/images/search/350.gif" onerror="this.parentNode.innerHTML='Disable your ad blocking software to view this content.'" style="width: 15px; height: 15px;" /><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

Answer 1

Il est un peu délicat parce que vous devez utiliser important dans votre CSS. Je pense que ce qui suit vous donne ce dont vous avez besoin:

.bo-garden { 
    min-height: 5055px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
} 

.bo-con { 
    margin: 0!important; 
    position: relative!important; 
    top: 0!important; 
    left: 0!important; 
    width: 30%; 
}