safari: flexbox und extra margin

Question

wie kann ich diesen rand für safari entfernen?

ul { 
    columns: 320px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    border: 2px solid black; 
    border-radius: 5px; 
    padding: 40px 30px 50px 30px; 
    position: relative; 
    text-align: left; 
    width: 320px; 
    margin-bottom: 20px; 
    margin-right: 20px; 
    break-inside: avoid; 
    column-gap: 0; 
    &:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

Demo: https://jsbin.com/wocaxopofa/1/edit?html,css,output

Answer 1

hinzufügen display: inline-block zu li

.wrap { 
 
    width: 1200px; 
 
} 
 

 
ul { 
 
    columns: 320px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    padding: 40px 30px 50px 30px; 
 
    position: relative; 
 
    text-align: left; 
 
    width: 320px; 
 
    margin-bottom: 20px; 
 
    margin-right: 20px; 
 
    break-inside: avoid; 
 
    column-gap: 0; 
 
    display: inline-block; 
 
} 
 
li:nth-child(3n) { 
 
    margin-right: 0; 
 
}

<div class="wrap"> 
 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam reiciendis eum sit illum ut fuga enim sapiente maiores nobis ratione!</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod alias omnis nostrum iste facilis nobis blanditiis numquam hic inventore laboriosam atque quis consequuntur soluta, molestias odit error praesentium ab! Praesentium consequuntur deserunt possimus perspiciatis dolor fugit laboriosam, rem ut provident voluptatum voluptas veritatis dolorem! Eos neque odit ad libero deleniti.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nemo.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum officiis libero praesentium quis! Qui nemo similique dolorem at obcaecati pariatur odio possimus minus. Quisquam delectus ex nisi est accusamus, ullam ducimus quod quidem veritatis cupiditate molestias aut maxime, dicta vel.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, quas!</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque deleniti eius eligendi reprehenderit accusamus quos? Tempore provident modi aut impedit, aperiam quisquam iste doloremque voluptatum fuga sint eos aliquam.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aspernatur itaque quo libero provident id hic nesciunt, officiis nemo, sapiente.</li> 
 
    <li>Lorem ipsum dolor sit amet.</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores, aliquam ex adipisci amet numquam dolorum dicta soluta excepturi reprehenderit vitae aspernatur labore commodi animi quaerat sed at, eveniet magni!</li> 
 
    </ul> 
 
</div>

https://jsbin.com/wuworukexu/edit?html,css,output