Don't know how to edit overflowing list item - html

Question

I have a question about list items. How can I code that 3 list items are on top and 3 at the bottom. It just overflowing to the right site.
<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">İnternetim neden yavaş?</h1>
<blockquote>Herkes internet dehası değildir, ancak hiç kimse sayfaların yüklenmesini, videoların oynatılmasını veya sosyal medyadan en son bilgileri almayı beklemeyi sevmez. İnternetiniz yavaşsa, bunun olmasının birkaç nedeni olabilir. Sorunun internetiniz mi yoksa bilgisayarınızla ilgili bir sorun mu olduğunu belirlemenin en kolay yolu hızınızı test etmektir. Buna iki kısım dahildir: yükleme hızı, bir web sitesine resim ve video yükleme hızı ve indirme hızı, başka bir yerden ne kadar hızlı bilgi aldığınız. Hiç kimse bir video arabelleğini saatlerce tekrar tekrar izlemek istemez. En sevdiğiniz resimleri sosyal medyaya yükleyememenin hayal kırıklığını hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmadığını anlamak için hızınızı test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmalıyım?</h1>
<blockquote>İlk ve en önemli adım internet hızınızı test etmektir; bu, sorunun bilgisayarınız, ağınız veya internet servis sağlayıcınızla ilgili olup olmadığını anlamanıza yardımcı olacaktır. Bir hız testi çözümü seçerken güvenilir bir hizmet seçmek önemlidir, çünkü yanlış sonuçlar daha fazla hayal kırıklığına neden olabilir ve üretkenliği geciktirebilir. Hız Testi Me, internet hızınızı ölçmek için içeriğe hızlı erişim sağlar, bu da sonuçları indirme ve yükleme hızlarına doğru bir şekilde bölerek yalnızca ana soruna odaklanmanıza olanak tanır.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">İnternet Hızı Neden Bu Kadar Önemli?</h1>
<blockquote>İnternet hızı, çalışmanın, alışveriş yapmanın veya sadece çevrimiçi eğlenmenin kritik bir bileşenidir. İnternet hızınızı arada bir internet hız testi ile kontrol etmek, internet bağlantınızın ödediğiniz internet hızıyla aynı hizada olduğundan emin olmak önemlidir. İnternet hızınızın ne kadar hızlı olduğu, fotoğrafları ne kadar hızlı görüntüleyebileceğinizi, dosya yükleyebileceğinizi, ekleri indirebileceğinizi ve genellikle çevrimiçi olarak yaptığımız günlük aktivitelerin birçoğunu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu hız testini kullanmalısınız?</h1>
<blockquote>Tüm DSL hızlarını ücretsiz ölçün. 60 saniye içinde bir indirme testi gerçekleştirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, bağlantınız aracılığıyla ev bilgisayarına aktarılır. Buradan hesaplanan indirme hızı, kontrol edilen bağlantıya ulaşılabilecek hız hakkında bilgi sağlar. DSL veya ISDN bağlantınız olup olmadığına bakılmaksızın - hız testi sırasında bağlantının gereksiz programlar tarafından mümkün olduğunca az yüklenmesi önemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne için kullanılamaz?</h1>
<blockquote>Hat testimiz %100 doğru sonuçlar veremez. Bununla birlikte, transfer oranlarının nispeten iyi bir tahmini için değerler çok yardımcı olabilir. Bunun temel nedeni, ölçüm üzerinde az çok büyük etkisi olan birçok parametrenin sürekli değişebilmesidir. Ölçüm sonucu, DSL sağlayıcınız için kanıt olarak kullanılamaz. Ölçüm sonuçları için garanti verilmez. Hizmet kalıcı olarak mevcut değildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant genişliği nedir?</h1>
<blockquote>Bant genişliği, internet dünyasında verilerin aktarılma, yüklenme veya indirilme oranını ifade etmek için kullanılan bir terimdir. Ancak bilgisayarınızın gerçek hızı yalnızca bant genişliğine değil, işlemcisine de bağlıdır. Yavaş bir işlemci ile yüksek bant genişliği, düşük performans anlamına gelir. Yavaş bant genişliğine sahip yüksek işlemci kalitesi de düşük performans anlamına gelir. Müşterilerin internet bağlantılarının hızını düzenli olarak kontrol edebilmeleri için bant genişliği hız testi sunan birçok çevrimiçi mağaza var. Sadece ücretsiz olarak tekliflerinden yararlanın ve bilgisayarınızın neler olduğunu görün.</blockquote>
</li>
</ul>
</div>

Answer 1

You can use css flex (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
Youll need to set your ul to become a flex element and allow flex content to break into new lines.
display: flex;
flex-wrap: wrap;
Then set the flex property of your li to make the li's take 1/3rd of the width:
flex: 0 0 33.3333%;
For completeness, flex: 0 0 33.3333%; is a shorthand for:
flex-shrink: 0;
flex-grow: 0;
flex-basis: 33.3333%;
Also reset the browser default margin on blockquote to make everything fit nicely.
I put everything together in a snippet down below.
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex: 0 0 33.33%;
}
blockquote {
margin: 0;
}
<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">İnternetim neden yavaş?</h1>
<blockquote>Herkes internet dehası değildir, ancak hiç kimse sayfaların yüklenmesini, videoların oynatılmasını veya sosyal medyadan en son bilgileri almayı beklemeyi sevmez. İnternetiniz yavaşsa, bunun olmasının birkaç nedeni olabilir. Sorunun internetiniz
mi yoksa bilgisayarınızla ilgili bir sorun mu olduğunu belirlemenin en kolay yolu hızınızı test etmektir. Buna iki kısım dahildir: yükleme hızı, bir web sitesine resim ve video yükleme hızı ve indirme hızı, başka bir yerden ne kadar hızlı bilgi
aldığınız. Hiç kimse bir video arabelleğini saatlerce tekrar tekrar izlemek istemez. En sevdiğiniz resimleri sosyal medyaya yükleyememenin hayal kırıklığını hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmadığını anlamak için hızınızı
test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmalıyım?</h1>
<blockquote>İlk ve en önemli adım internet hızınızı test etmektir; bu, sorunun bilgisayarınız, ağınız veya internet servis sağlayıcınızla ilgili olup olmadığını anlamanıza yardımcı olacaktır. Bir hız testi çözümü seçerken güvenilir bir hizmet seçmek önemlidir,
çünkü yanlış sonuçlar daha fazla hayal kırıklığına neden olabilir ve üretkenliği geciktirebilir. Hız Testi Me, internet hızınızı ölçmek için içeriğe hızlı erişim sağlar, bu da sonuçları indirme ve yükleme hızlarına doğru bir şekilde bölerek yalnızca
ana soruna odaklanmanıza olanak tanır.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">İnternet Hızı Neden Bu Kadar Önemli?</h1>
<blockquote>İnternet hızı, çalışmanın, alışveriş yapmanın veya sadece çevrimiçi eğlenmenin kritik bir bileşenidir. İnternet hızınızı arada bir internet hız testi ile kontrol etmek, internet bağlantınızın ödediğiniz internet hızıyla aynı hizada olduğundan emin
olmak önemlidir. İnternet hızınızın ne kadar hızlı olduğu, fotoğrafları ne kadar hızlı görüntüleyebileceğinizi, dosya yükleyebileceğinizi, ekleri indirebileceğinizi ve genellikle çevrimiçi olarak yaptığımız günlük aktivitelerin birçoğunu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu hız testini kullanmalısınız?</h1>
<blockquote>Tüm DSL hızlarını ücretsiz ölçün. 60 saniye içinde bir indirme testi gerçekleştirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, bağlantınız aracılığıyla ev bilgisayarına aktarılır. Buradan hesaplanan indirme hızı, kontrol edilen bağlantıya
ulaşılabilecek hız hakkında bilgi sağlar. DSL veya ISDN bağlantınız olup olmadığına bakılmaksızın - hız testi sırasında bağlantının gereksiz programlar tarafından mümkün olduğunca az yüklenmesi önemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne için kullanılamaz?</h1>
<blockquote>Hat testimiz %100 doğru sonuçlar veremez. Bununla birlikte, transfer oranlarının nispeten iyi bir tahmini için değerler çok yardımcı olabilir. Bunun temel nedeni, ölçüm üzerinde az çok büyük etkisi olan birçok parametrenin sürekli değişebilmesidir.
Ölçüm sonucu, DSL sağlayıcınız için kanıt olarak kullanılamaz. Ölçüm sonuçları için garanti verilmez. Hizmet kalıcı olarak mevcut değildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant genişliği nedir?</h1>
<blockquote>Bant genişliği, internet dünyasında verilerin aktarılma, yüklenme veya indirilme oranını ifade etmek için kullanılan bir terimdir. Ancak bilgisayarınızın gerçek hızı yalnızca bant genişliğine değil, işlemcisine de bağlıdır. Yavaş bir işlemci ile
yüksek bant genişliği, düşük performans anlamına gelir. Yavaş bant genişliğine sahip yüksek işlemci kalitesi de düşük performans anlamına gelir. Müşterilerin internet bağlantılarının hızını düzenli olarak kontrol edebilmeleri için bant genişliği
hız testi sunan birçok çevrimiçi mağaza var. Sadece ücretsiz olarak tekliflerinden yararlanın ve bilgisayarınızın neler olduğunu görün.</blockquote>
</li>
</ul>
</div>