Column-count and page-break












0















Currently I am working on my development-server (http://52.57.22.230/) on a new menu (click under "Programme" right under the logo an the top left).



Chrome behaves different than other browsers. I use column-count: 5 for this size and set break-inside: avoid; to get 5 columns but to start with a topic. Edge, Firefox behave like I would like it to have, Chrome shows only 3 columns. I kind of get it that chrome does what break-inside: avoid; says, but I would like to have the same behaviour like in Firefox across all browsers.



The html of the menu:



<div class="overlay" style="display: block;">
<div class="wrap">
<div class="btn-close"></div>
<ul class="wrap-nav">
<div class="columnbreak">

<h3>
Rundreisen </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak" style="">

<h3>
Freiwilligenarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
</ul>
<h5>karibik</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak">

<h3>
Farmarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
</ul>
</div>
</ul>
<div class="socialmenu">
<a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
<a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
</div>
</div>
</div>


The css:



.wrap-nav h3 a {color: #fff!important;}

/*overlay*/

.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #cb0000;
opacity: 0.95;
overflow: auto;
z-index: 1000001;
}
.wrap {
color: #fff;
/* text-align:center; */
max-width: 90%;
margin: 0 auto;
}
.columnbreak {
break-inside: avoid;
}

.wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
border: dashed #fff;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 10px;
height: 0;
}
.wrap ul {
margin: 0;
}
/*.wrap ul li {
margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
border-bottom: 1px dashed #fff;
padding: 3rem 0 1rem;
column-count: 5;
}
.wrap-nav h2 {
display: block;
padding: 5px 0;
text-decoration: none;
color: #fff;
font-size: 2.1rem;
font-weight: bold;
}
.breiter {
width: 40%!important;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 18%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
padding: 2px 0;
text-decoration: none;
transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #fff;
}
.wrap ul.wrap-nav ul {
padding: .8rem 0;
/* border-bottom: 1px dashed #fff;
/* margin-bottom: 1.5rem; */
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 77%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
color: #fff;
background: none;
text-decoration: underline;
}
.socialmenu {
text-align: center!important;
padding: 2rem 0!important;
}
.socialmenu .button {
color: #fff;
border: 1px solid #fff!important;
}
.socialmenu .button:hover {
color: #cb0000!important;
background-color: #fff;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px dashed #fff;
}
.wrap ul.wrap-nav {
padding: 30px 0 0;
}
.wrap ul h3,
.wrap ul h5 {
color: #fff;
}
.content h3, h4, h5 {
color: #00a4e9;
}
h3.ui-accordion-header {
color: #fff;
}
}


Any suggestions? Thanks in advance!



Screenshots:
five columns



with chrome/blink










share|improve this question



























    0















    Currently I am working on my development-server (http://52.57.22.230/) on a new menu (click under "Programme" right under the logo an the top left).



    Chrome behaves different than other browsers. I use column-count: 5 for this size and set break-inside: avoid; to get 5 columns but to start with a topic. Edge, Firefox behave like I would like it to have, Chrome shows only 3 columns. I kind of get it that chrome does what break-inside: avoid; says, but I would like to have the same behaviour like in Firefox across all browsers.



    The html of the menu:



    <div class="overlay" style="display: block;">
    <div class="wrap">
    <div class="btn-close"></div>
    <ul class="wrap-nav">
    <div class="columnbreak">

    <h3>
    Rundreisen </h3>
    <hr>
    <ul>
    <li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
    </ul>
    <h5>afrika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
    </ul>
    <h5>asien</h5>
    <ul>
    <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
    </ul>
    <h5>ozeanien</h5>
    <ul>
    <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
    </ul>
    </div>
    <div class="columnbreak" style="">

    <h3>
    Freiwilligenarbeit </h3>
    <hr>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
    </ul>
    <h5>afrika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
    </ul>
    <h5>asien</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
    </ul>
    <h5>europa</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
    </ul>
    <h5>karibik</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
    </ul>
    <h5>lateinamerika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
    </ul>
    <h5>nordamerika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
    </ul>
    <h5>ozeanien</h5>
    <ul>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
    <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
    </ul>
    </div>
    <div class="columnbreak">

    <h3>
    Farmarbeit </h3>
    <hr>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
    </ul>
    <h5>afrika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
    </ul>
    <h5>europa</h5>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
    </ul>
    <h5>lateinamerika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
    </ul>
    <h5>nordamerika</h5>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
    </ul>
    <h5>ozeanien</h5>
    <ul>
    <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
    <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
    </ul>
    </div>
    </ul>
    <div class="socialmenu">
    <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
    <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
    </div>
    </div>
    </div>


    The css:



    .wrap-nav h3 a {color: #fff!important;}

    /*overlay*/

    .overlay {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: #cb0000;
    opacity: 0.95;
    overflow: auto;
    z-index: 1000001;
    }
    .wrap {
    color: #fff;
    /* text-align:center; */
    max-width: 90%;
    margin: 0 auto;
    }
    .columnbreak {
    break-inside: avoid;
    }

    .wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
    .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
    .wrap hr {
    border: dashed #fff;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 10px;
    height: 0;
    }
    .wrap ul {
    margin: 0;
    }
    /*.wrap ul li {
    margin-bottom: 0.3rem;
    }*/
    .wrap ul.wrap-nav {
    border-bottom: 1px dashed #fff;
    padding: 3rem 0 1rem;
    column-count: 5;
    }
    .wrap-nav h2 {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
    }
    .breiter {
    width: 40%!important;
    }
    .wrap ul.wrap-nav li {
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    width: 18%;
    position: relative;
    }
    .wrap ul.wrap-nav li a {
    color: #fff;
    display: block;
    padding: 2px 0;
    text-decoration: none;
    transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    }
    .wrap ul.wrap-nav li a:hover {
    color: #fff;
    }
    .wrap ul.wrap-nav ul {
    padding: .8rem 0;
    /* border-bottom: 1px dashed #fff;
    /* margin-bottom: 1.5rem; */
    }
    .wrap ul.wrap-nav ul li {
    display: block;
    font-size: 13px;
    width: 77%;
    color: #e9e9e9;
    }
    .wrap ul.wrap-nav ul li a {
    color: #fff;
    }
    .wrap ul.wrap-nav ul li a:hover {
    color: #fff;
    background: none;
    text-decoration: underline;
    }
    .socialmenu {
    text-align: center!important;
    padding: 2rem 0!important;
    }
    .socialmenu .button {
    color: #fff;
    border: 1px solid #fff!important;
    }
    .socialmenu .button:hover {
    color: #cb0000!important;
    background-color: #fff;
    }
    @media screen and (max-width:48em) {
    .wrap ul.wrap-nav>li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px dashed #fff;
    }
    .wrap ul.wrap-nav {
    padding: 30px 0 0;
    }
    .wrap ul h3,
    .wrap ul h5 {
    color: #fff;
    }
    .content h3, h4, h5 {
    color: #00a4e9;
    }
    h3.ui-accordion-header {
    color: #fff;
    }
    }


    Any suggestions? Thanks in advance!



    Screenshots:
    five columns



    with chrome/blink










    share|improve this question

























      0












      0








      0








      Currently I am working on my development-server (http://52.57.22.230/) on a new menu (click under "Programme" right under the logo an the top left).



      Chrome behaves different than other browsers. I use column-count: 5 for this size and set break-inside: avoid; to get 5 columns but to start with a topic. Edge, Firefox behave like I would like it to have, Chrome shows only 3 columns. I kind of get it that chrome does what break-inside: avoid; says, but I would like to have the same behaviour like in Firefox across all browsers.



      The html of the menu:



      <div class="overlay" style="display: block;">
      <div class="wrap">
      <div class="btn-close"></div>
      <ul class="wrap-nav">
      <div class="columnbreak">

      <h3>
      Rundreisen </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
      </ul>
      <h5>asien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
      </ul>
      </div>
      <div class="columnbreak" style="">

      <h3>
      Freiwilligenarbeit </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
      </ul>
      <h5>asien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
      </ul>
      <h5>europa</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
      </ul>
      <h5>karibik</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
      </ul>
      <h5>lateinamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
      </ul>
      <h5>nordamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
      </ul>
      </div>
      <div class="columnbreak">

      <h3>
      Farmarbeit </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
      </ul>
      <h5>europa</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
      </ul>
      <h5>lateinamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
      </ul>
      <h5>nordamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
      </ul>
      </div>
      </ul>
      <div class="socialmenu">
      <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
      <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
      </div>
      </div>
      </div>


      The css:



      .wrap-nav h3 a {color: #fff!important;}

      /*overlay*/

      .overlay {
      display: none;
      position: fixed;
      top: 0;
      height: 100%;
      width: 100%;
      background: #cb0000;
      opacity: 0.95;
      overflow: auto;
      z-index: 1000001;
      }
      .wrap {
      color: #fff;
      /* text-align:center; */
      max-width: 90%;
      margin: 0 auto;
      }
      .columnbreak {
      break-inside: avoid;
      }

      .wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
      .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
      .wrap hr {
      border: dashed #fff;
      border-width: 1px 0 0;
      clear: both;
      margin: 10px 0 10px;
      height: 0;
      }
      .wrap ul {
      margin: 0;
      }
      /*.wrap ul li {
      margin-bottom: 0.3rem;
      }*/
      .wrap ul.wrap-nav {
      border-bottom: 1px dashed #fff;
      padding: 3rem 0 1rem;
      column-count: 5;
      }
      .wrap-nav h2 {
      display: block;
      padding: 5px 0;
      text-decoration: none;
      color: #fff;
      font-size: 2.1rem;
      font-weight: bold;
      }
      .breiter {
      width: 40%!important;
      }
      .wrap ul.wrap-nav li {
      font-size: 20px;
      display: inline-block;
      vertical-align: top;
      width: 18%;
      position: relative;
      }
      .wrap ul.wrap-nav li a {
      color: #fff;
      display: block;
      padding: 2px 0;
      text-decoration: none;
      transition: all .2s linear 0s;
      -moz-transition: all .2s linear 0s;
      -webkit-transition: all .2s linear 0s;
      -o-transition: all .2s linear 0s;
      }
      .wrap ul.wrap-nav li a:hover {
      color: #fff;
      }
      .wrap ul.wrap-nav ul {
      padding: .8rem 0;
      /* border-bottom: 1px dashed #fff;
      /* margin-bottom: 1.5rem; */
      }
      .wrap ul.wrap-nav ul li {
      display: block;
      font-size: 13px;
      width: 77%;
      color: #e9e9e9;
      }
      .wrap ul.wrap-nav ul li a {
      color: #fff;
      }
      .wrap ul.wrap-nav ul li a:hover {
      color: #fff;
      background: none;
      text-decoration: underline;
      }
      .socialmenu {
      text-align: center!important;
      padding: 2rem 0!important;
      }
      .socialmenu .button {
      color: #fff;
      border: 1px solid #fff!important;
      }
      .socialmenu .button:hover {
      color: #cb0000!important;
      background-color: #fff;
      }
      @media screen and (max-width:48em) {
      .wrap ul.wrap-nav>li {
      width: 100%;
      padding: 20px 0;
      border-bottom: 1px dashed #fff;
      }
      .wrap ul.wrap-nav {
      padding: 30px 0 0;
      }
      .wrap ul h3,
      .wrap ul h5 {
      color: #fff;
      }
      .content h3, h4, h5 {
      color: #00a4e9;
      }
      h3.ui-accordion-header {
      color: #fff;
      }
      }


      Any suggestions? Thanks in advance!



      Screenshots:
      five columns



      with chrome/blink










      share|improve this question














      Currently I am working on my development-server (http://52.57.22.230/) on a new menu (click under "Programme" right under the logo an the top left).



      Chrome behaves different than other browsers. I use column-count: 5 for this size and set break-inside: avoid; to get 5 columns but to start with a topic. Edge, Firefox behave like I would like it to have, Chrome shows only 3 columns. I kind of get it that chrome does what break-inside: avoid; says, but I would like to have the same behaviour like in Firefox across all browsers.



      The html of the menu:



      <div class="overlay" style="display: block;">
      <div class="wrap">
      <div class="btn-close"></div>
      <ul class="wrap-nav">
      <div class="columnbreak">

      <h3>
      Rundreisen </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
      </ul>
      <h5>asien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
      </ul>
      </div>
      <div class="columnbreak" style="">

      <h3>
      Freiwilligenarbeit </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
      </ul>
      <h5>asien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
      </ul>
      <h5>europa</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
      </ul>
      <h5>karibik</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
      </ul>
      <h5>lateinamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
      </ul>
      <h5>nordamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
      <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
      </ul>
      </div>
      <div class="columnbreak">

      <h3>
      Farmarbeit </h3>
      <hr>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
      </ul>
      <h5>afrika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
      </ul>
      <h5>europa</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
      </ul>
      <h5>lateinamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
      </ul>
      <h5>nordamerika</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
      </ul>
      <h5>ozeanien</h5>
      <ul>
      <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
      <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
      </ul>
      </div>
      </ul>
      <div class="socialmenu">
      <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
      <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
      </div>
      </div>
      </div>


      The css:



      .wrap-nav h3 a {color: #fff!important;}

      /*overlay*/

      .overlay {
      display: none;
      position: fixed;
      top: 0;
      height: 100%;
      width: 100%;
      background: #cb0000;
      opacity: 0.95;
      overflow: auto;
      z-index: 1000001;
      }
      .wrap {
      color: #fff;
      /* text-align:center; */
      max-width: 90%;
      margin: 0 auto;
      }
      .columnbreak {
      break-inside: avoid;
      }

      .wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
      .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
      .wrap hr {
      border: dashed #fff;
      border-width: 1px 0 0;
      clear: both;
      margin: 10px 0 10px;
      height: 0;
      }
      .wrap ul {
      margin: 0;
      }
      /*.wrap ul li {
      margin-bottom: 0.3rem;
      }*/
      .wrap ul.wrap-nav {
      border-bottom: 1px dashed #fff;
      padding: 3rem 0 1rem;
      column-count: 5;
      }
      .wrap-nav h2 {
      display: block;
      padding: 5px 0;
      text-decoration: none;
      color: #fff;
      font-size: 2.1rem;
      font-weight: bold;
      }
      .breiter {
      width: 40%!important;
      }
      .wrap ul.wrap-nav li {
      font-size: 20px;
      display: inline-block;
      vertical-align: top;
      width: 18%;
      position: relative;
      }
      .wrap ul.wrap-nav li a {
      color: #fff;
      display: block;
      padding: 2px 0;
      text-decoration: none;
      transition: all .2s linear 0s;
      -moz-transition: all .2s linear 0s;
      -webkit-transition: all .2s linear 0s;
      -o-transition: all .2s linear 0s;
      }
      .wrap ul.wrap-nav li a:hover {
      color: #fff;
      }
      .wrap ul.wrap-nav ul {
      padding: .8rem 0;
      /* border-bottom: 1px dashed #fff;
      /* margin-bottom: 1.5rem; */
      }
      .wrap ul.wrap-nav ul li {
      display: block;
      font-size: 13px;
      width: 77%;
      color: #e9e9e9;
      }
      .wrap ul.wrap-nav ul li a {
      color: #fff;
      }
      .wrap ul.wrap-nav ul li a:hover {
      color: #fff;
      background: none;
      text-decoration: underline;
      }
      .socialmenu {
      text-align: center!important;
      padding: 2rem 0!important;
      }
      .socialmenu .button {
      color: #fff;
      border: 1px solid #fff!important;
      }
      .socialmenu .button:hover {
      color: #cb0000!important;
      background-color: #fff;
      }
      @media screen and (max-width:48em) {
      .wrap ul.wrap-nav>li {
      width: 100%;
      padding: 20px 0;
      border-bottom: 1px dashed #fff;
      }
      .wrap ul.wrap-nav {
      padding: 30px 0 0;
      }
      .wrap ul h3,
      .wrap ul h5 {
      color: #fff;
      }
      .content h3, h4, h5 {
      color: #00a4e9;
      }
      h3.ui-accordion-header {
      color: #fff;
      }
      }


      Any suggestions? Thanks in advance!



      Screenshots:
      five columns



      with chrome/blink







      css multiple-columns web-frontend






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 22 '18 at 10:17









      manuelJoaquimmanuelJoaquim

      29118




      29118
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Well, it turns out column-count is not the right solution for it. Used flex-box and it worked much better than expected.



          <div class="overlay" style="display: block;">
          <div class="wrap">
          <div class="btn-close"></div>
          <ul class="wrap-nav">
          <div class="columnbreak">
          <h3>
          Rundreisen </h3>
          <ul class="test02">
          <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
          </ul>
          <div class="columnbreak-inner">


          <ul>
          <h5>afrika</h5>
          <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
          </ul>


          <ul>
          <h5>asien</h5>
          <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
          </ul>


          <ul>
          <h5>ozeanien</h5>
          <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
          </ul>

          </div>
          </div>
          <div class="columnbreak">
          <h3>
          Freiwilligenarbeit </h3>
          <ul class="test02">
          <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
          </ul>
          <div class="columnbreak-inner">


          <ul>
          <h5>afrika</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
          </ul>


          <ul>
          <h5>asien</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
          </ul>


          <ul>
          <h5>europa</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
          </ul>


          <ul>
          <h5>karibik</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
          </ul>


          <ul>
          <h5>lateinamerika</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
          </ul>


          <ul>
          <h5>nordamerika</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
          </ul>


          <ul>
          <h5>ozeanien</h5>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
          <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
          </ul>

          </div>
          </div>
          <div class="columnbreak">
          <h3>
          Farmarbeit </h3>
          <ul class="test02">
          <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
          </ul>
          <div class="columnbreak-inner">


          <ul>
          <h5>afrika</h5>
          <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
          </ul>


          <ul>
          <h5>europa</h5>
          <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
          </ul>


          <ul>
          <h5>lateinamerika</h5>
          <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
          </ul>


          <ul>
          <h5>nordamerika</h5>
          <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
          </ul>


          <ul>
          <h5>ozeanien</h5>
          <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
          <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
          </ul>

          </div>
          </div>
          </ul>
          <div class="socialmenu">
          <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
          <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
          </div>
          </div>
          </div>


          and the css:



          .wrap-nav h3 a {color: #fff!important;}

          /*overlay*/

          .overlay {
          display: none;
          position: fixed;
          top: 0;
          height: 100%;
          width: 100%;
          background: #cb0000;
          opacity: 0.95;
          overflow: auto;
          z-index: 1000001;
          }
          .wrap {
          color: #fff;
          /* text-align:center; */
          max-width: 90%;
          margin: 0 auto;
          }
          .columnbreak {
          /* break-inside: avoid; */
          flex-basis: 33%;
          margin: 0 .5rem;
          }
          .columnbreak-inner {
          display: flex;
          flex-wrap: wrap;
          }

          .wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
          .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
          .wrap hr {
          border: dashed #fff;
          border-width: 1px 0 0;
          clear: both;
          margin: 10px 0 10px;
          height: 0;
          }
          .wrap ul {
          margin: 0;
          }
          /*.wrap ul li {
          margin-bottom: 0.3rem;
          }*/
          .wrap ul.wrap-nav {
          border-bottom: 1px dashed #fff;
          padding: 3rem 0 1rem;
          /* column-count: 5; */
          display: flex;
          }
          .wrap-nav h2 {
          display: block;
          padding: 5px 0;
          text-decoration: none;
          color: #fff;
          font-size: 2.1rem;
          font-weight: bold;
          }
          .breiter {
          width: 40%!important;
          }
          .wrap ul.wrap-nav li {
          font-size: 20px;
          display: inline-block;
          vertical-align: top;
          width: 18%;
          position: relative;
          }
          .wrap ul.wrap-nav li a {
          color: #fff;
          display: block;
          padding: 2px 0;
          text-decoration: none;
          transition: all .2s linear 0s;
          -moz-transition: all .2s linear 0s;
          -webkit-transition: all .2s linear 0s;
          -o-transition: all .2s linear 0s;
          }
          .wrap ul.wrap-nav li a:hover {
          color: #fff;
          }
          .wrap ul.wrap-nav ul {
          padding: .8rem 0;
          /* border-bottom: 1px dashed #fff;
          /* margin-bottom: 1.5rem; */
          flex-basis: 50%
          }
          .wrap ul.wrap-nav ul li {
          display: block;
          font-size: 13px;
          width: 77%;
          color: #e9e9e9;
          }
          .wrap ul.wrap-nav ul li a {
          color: #fff;
          }
          .wrap ul.wrap-nav ul li a:hover {
          color: #fff;
          background: none;
          text-decoration: underline;
          }
          .socialmenu {
          text-align: center!important;
          padding: 2rem 0!important;
          }
          .socialmenu .button {
          color: #fff;
          border: 1px solid #fff!important;
          }
          .socialmenu .button:hover {
          color: #cb0000!important;
          background-color: #fff;
          }





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428660%2fcolumn-count-and-page-break%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Well, it turns out column-count is not the right solution for it. Used flex-box and it worked much better than expected.



            <div class="overlay" style="display: block;">
            <div class="wrap">
            <div class="btn-close"></div>
            <ul class="wrap-nav">
            <div class="columnbreak">
            <h3>
            Rundreisen </h3>
            <ul class="test02">
            <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
            </ul>
            <div class="columnbreak-inner">


            <ul>
            <h5>afrika</h5>
            <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
            </ul>


            <ul>
            <h5>asien</h5>
            <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
            </ul>


            <ul>
            <h5>ozeanien</h5>
            <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
            </ul>

            </div>
            </div>
            <div class="columnbreak">
            <h3>
            Freiwilligenarbeit </h3>
            <ul class="test02">
            <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
            </ul>
            <div class="columnbreak-inner">


            <ul>
            <h5>afrika</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
            </ul>


            <ul>
            <h5>asien</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
            </ul>


            <ul>
            <h5>europa</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
            </ul>


            <ul>
            <h5>karibik</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
            </ul>


            <ul>
            <h5>lateinamerika</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
            </ul>


            <ul>
            <h5>nordamerika</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
            </ul>


            <ul>
            <h5>ozeanien</h5>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
            <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
            </ul>

            </div>
            </div>
            <div class="columnbreak">
            <h3>
            Farmarbeit </h3>
            <ul class="test02">
            <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
            </ul>
            <div class="columnbreak-inner">


            <ul>
            <h5>afrika</h5>
            <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
            </ul>


            <ul>
            <h5>europa</h5>
            <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
            </ul>


            <ul>
            <h5>lateinamerika</h5>
            <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
            </ul>


            <ul>
            <h5>nordamerika</h5>
            <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
            </ul>


            <ul>
            <h5>ozeanien</h5>
            <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
            <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
            </ul>

            </div>
            </div>
            </ul>
            <div class="socialmenu">
            <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
            <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
            </div>
            </div>
            </div>


            and the css:



            .wrap-nav h3 a {color: #fff!important;}

            /*overlay*/

            .overlay {
            display: none;
            position: fixed;
            top: 0;
            height: 100%;
            width: 100%;
            background: #cb0000;
            opacity: 0.95;
            overflow: auto;
            z-index: 1000001;
            }
            .wrap {
            color: #fff;
            /* text-align:center; */
            max-width: 90%;
            margin: 0 auto;
            }
            .columnbreak {
            /* break-inside: avoid; */
            flex-basis: 33%;
            margin: 0 .5rem;
            }
            .columnbreak-inner {
            display: flex;
            flex-wrap: wrap;
            }

            .wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
            .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
            .wrap hr {
            border: dashed #fff;
            border-width: 1px 0 0;
            clear: both;
            margin: 10px 0 10px;
            height: 0;
            }
            .wrap ul {
            margin: 0;
            }
            /*.wrap ul li {
            margin-bottom: 0.3rem;
            }*/
            .wrap ul.wrap-nav {
            border-bottom: 1px dashed #fff;
            padding: 3rem 0 1rem;
            /* column-count: 5; */
            display: flex;
            }
            .wrap-nav h2 {
            display: block;
            padding: 5px 0;
            text-decoration: none;
            color: #fff;
            font-size: 2.1rem;
            font-weight: bold;
            }
            .breiter {
            width: 40%!important;
            }
            .wrap ul.wrap-nav li {
            font-size: 20px;
            display: inline-block;
            vertical-align: top;
            width: 18%;
            position: relative;
            }
            .wrap ul.wrap-nav li a {
            color: #fff;
            display: block;
            padding: 2px 0;
            text-decoration: none;
            transition: all .2s linear 0s;
            -moz-transition: all .2s linear 0s;
            -webkit-transition: all .2s linear 0s;
            -o-transition: all .2s linear 0s;
            }
            .wrap ul.wrap-nav li a:hover {
            color: #fff;
            }
            .wrap ul.wrap-nav ul {
            padding: .8rem 0;
            /* border-bottom: 1px dashed #fff;
            /* margin-bottom: 1.5rem; */
            flex-basis: 50%
            }
            .wrap ul.wrap-nav ul li {
            display: block;
            font-size: 13px;
            width: 77%;
            color: #e9e9e9;
            }
            .wrap ul.wrap-nav ul li a {
            color: #fff;
            }
            .wrap ul.wrap-nav ul li a:hover {
            color: #fff;
            background: none;
            text-decoration: underline;
            }
            .socialmenu {
            text-align: center!important;
            padding: 2rem 0!important;
            }
            .socialmenu .button {
            color: #fff;
            border: 1px solid #fff!important;
            }
            .socialmenu .button:hover {
            color: #cb0000!important;
            background-color: #fff;
            }





            share|improve this answer




























              0














              Well, it turns out column-count is not the right solution for it. Used flex-box and it worked much better than expected.



              <div class="overlay" style="display: block;">
              <div class="wrap">
              <div class="btn-close"></div>
              <ul class="wrap-nav">
              <div class="columnbreak">
              <h3>
              Rundreisen </h3>
              <ul class="test02">
              <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
              </ul>
              <div class="columnbreak-inner">


              <ul>
              <h5>afrika</h5>
              <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
              </ul>


              <ul>
              <h5>asien</h5>
              <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
              </ul>


              <ul>
              <h5>ozeanien</h5>
              <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
              </ul>

              </div>
              </div>
              <div class="columnbreak">
              <h3>
              Freiwilligenarbeit </h3>
              <ul class="test02">
              <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
              </ul>
              <div class="columnbreak-inner">


              <ul>
              <h5>afrika</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
              </ul>


              <ul>
              <h5>asien</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
              </ul>


              <ul>
              <h5>europa</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
              </ul>


              <ul>
              <h5>karibik</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
              </ul>


              <ul>
              <h5>lateinamerika</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
              </ul>


              <ul>
              <h5>nordamerika</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
              </ul>


              <ul>
              <h5>ozeanien</h5>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
              <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
              </ul>

              </div>
              </div>
              <div class="columnbreak">
              <h3>
              Farmarbeit </h3>
              <ul class="test02">
              <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
              </ul>
              <div class="columnbreak-inner">


              <ul>
              <h5>afrika</h5>
              <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
              </ul>


              <ul>
              <h5>europa</h5>
              <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
              </ul>


              <ul>
              <h5>lateinamerika</h5>
              <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
              </ul>


              <ul>
              <h5>nordamerika</h5>
              <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
              </ul>


              <ul>
              <h5>ozeanien</h5>
              <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
              <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
              </ul>

              </div>
              </div>
              </ul>
              <div class="socialmenu">
              <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
              <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
              </div>
              </div>
              </div>


              and the css:



              .wrap-nav h3 a {color: #fff!important;}

              /*overlay*/

              .overlay {
              display: none;
              position: fixed;
              top: 0;
              height: 100%;
              width: 100%;
              background: #cb0000;
              opacity: 0.95;
              overflow: auto;
              z-index: 1000001;
              }
              .wrap {
              color: #fff;
              /* text-align:center; */
              max-width: 90%;
              margin: 0 auto;
              }
              .columnbreak {
              /* break-inside: avoid; */
              flex-basis: 33%;
              margin: 0 .5rem;
              }
              .columnbreak-inner {
              display: flex;
              flex-wrap: wrap;
              }

              .wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
              .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
              .wrap hr {
              border: dashed #fff;
              border-width: 1px 0 0;
              clear: both;
              margin: 10px 0 10px;
              height: 0;
              }
              .wrap ul {
              margin: 0;
              }
              /*.wrap ul li {
              margin-bottom: 0.3rem;
              }*/
              .wrap ul.wrap-nav {
              border-bottom: 1px dashed #fff;
              padding: 3rem 0 1rem;
              /* column-count: 5; */
              display: flex;
              }
              .wrap-nav h2 {
              display: block;
              padding: 5px 0;
              text-decoration: none;
              color: #fff;
              font-size: 2.1rem;
              font-weight: bold;
              }
              .breiter {
              width: 40%!important;
              }
              .wrap ul.wrap-nav li {
              font-size: 20px;
              display: inline-block;
              vertical-align: top;
              width: 18%;
              position: relative;
              }
              .wrap ul.wrap-nav li a {
              color: #fff;
              display: block;
              padding: 2px 0;
              text-decoration: none;
              transition: all .2s linear 0s;
              -moz-transition: all .2s linear 0s;
              -webkit-transition: all .2s linear 0s;
              -o-transition: all .2s linear 0s;
              }
              .wrap ul.wrap-nav li a:hover {
              color: #fff;
              }
              .wrap ul.wrap-nav ul {
              padding: .8rem 0;
              /* border-bottom: 1px dashed #fff;
              /* margin-bottom: 1.5rem; */
              flex-basis: 50%
              }
              .wrap ul.wrap-nav ul li {
              display: block;
              font-size: 13px;
              width: 77%;
              color: #e9e9e9;
              }
              .wrap ul.wrap-nav ul li a {
              color: #fff;
              }
              .wrap ul.wrap-nav ul li a:hover {
              color: #fff;
              background: none;
              text-decoration: underline;
              }
              .socialmenu {
              text-align: center!important;
              padding: 2rem 0!important;
              }
              .socialmenu .button {
              color: #fff;
              border: 1px solid #fff!important;
              }
              .socialmenu .button:hover {
              color: #cb0000!important;
              background-color: #fff;
              }





              share|improve this answer


























                0












                0








                0







                Well, it turns out column-count is not the right solution for it. Used flex-box and it worked much better than expected.



                <div class="overlay" style="display: block;">
                <div class="wrap">
                <div class="btn-close"></div>
                <ul class="wrap-nav">
                <div class="columnbreak">
                <h3>
                Rundreisen </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                </ul>


                <ul>
                <h5>asien</h5>
                <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
                </ul>

                </div>
                </div>
                <div class="columnbreak">
                <h3>
                Freiwilligenarbeit </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
                </ul>


                <ul>
                <h5>asien</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
                </ul>


                <ul>
                <h5>europa</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
                </ul>


                <ul>
                <h5>karibik</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
                </ul>


                <ul>
                <h5>lateinamerika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
                </ul>


                <ul>
                <h5>nordamerika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
                </ul>

                </div>
                </div>
                <div class="columnbreak">
                <h3>
                Farmarbeit </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
                </ul>


                <ul>
                <h5>europa</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
                </ul>


                <ul>
                <h5>lateinamerika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
                </ul>


                <ul>
                <h5>nordamerika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
                </ul>

                </div>
                </div>
                </ul>
                <div class="socialmenu">
                <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
                <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
                </div>
                </div>
                </div>


                and the css:



                .wrap-nav h3 a {color: #fff!important;}

                /*overlay*/

                .overlay {
                display: none;
                position: fixed;
                top: 0;
                height: 100%;
                width: 100%;
                background: #cb0000;
                opacity: 0.95;
                overflow: auto;
                z-index: 1000001;
                }
                .wrap {
                color: #fff;
                /* text-align:center; */
                max-width: 90%;
                margin: 0 auto;
                }
                .columnbreak {
                /* break-inside: avoid; */
                flex-basis: 33%;
                margin: 0 .5rem;
                }
                .columnbreak-inner {
                display: flex;
                flex-wrap: wrap;
                }

                .wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
                .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
                .wrap hr {
                border: dashed #fff;
                border-width: 1px 0 0;
                clear: both;
                margin: 10px 0 10px;
                height: 0;
                }
                .wrap ul {
                margin: 0;
                }
                /*.wrap ul li {
                margin-bottom: 0.3rem;
                }*/
                .wrap ul.wrap-nav {
                border-bottom: 1px dashed #fff;
                padding: 3rem 0 1rem;
                /* column-count: 5; */
                display: flex;
                }
                .wrap-nav h2 {
                display: block;
                padding: 5px 0;
                text-decoration: none;
                color: #fff;
                font-size: 2.1rem;
                font-weight: bold;
                }
                .breiter {
                width: 40%!important;
                }
                .wrap ul.wrap-nav li {
                font-size: 20px;
                display: inline-block;
                vertical-align: top;
                width: 18%;
                position: relative;
                }
                .wrap ul.wrap-nav li a {
                color: #fff;
                display: block;
                padding: 2px 0;
                text-decoration: none;
                transition: all .2s linear 0s;
                -moz-transition: all .2s linear 0s;
                -webkit-transition: all .2s linear 0s;
                -o-transition: all .2s linear 0s;
                }
                .wrap ul.wrap-nav li a:hover {
                color: #fff;
                }
                .wrap ul.wrap-nav ul {
                padding: .8rem 0;
                /* border-bottom: 1px dashed #fff;
                /* margin-bottom: 1.5rem; */
                flex-basis: 50%
                }
                .wrap ul.wrap-nav ul li {
                display: block;
                font-size: 13px;
                width: 77%;
                color: #e9e9e9;
                }
                .wrap ul.wrap-nav ul li a {
                color: #fff;
                }
                .wrap ul.wrap-nav ul li a:hover {
                color: #fff;
                background: none;
                text-decoration: underline;
                }
                .socialmenu {
                text-align: center!important;
                padding: 2rem 0!important;
                }
                .socialmenu .button {
                color: #fff;
                border: 1px solid #fff!important;
                }
                .socialmenu .button:hover {
                color: #cb0000!important;
                background-color: #fff;
                }





                share|improve this answer













                Well, it turns out column-count is not the right solution for it. Used flex-box and it worked much better than expected.



                <div class="overlay" style="display: block;">
                <div class="wrap">
                <div class="btn-close"></div>
                <ul class="wrap-nav">
                <div class="columnbreak">
                <h3>
                Rundreisen </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                </ul>


                <ul>
                <h5>asien</h5>
                <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
                </ul>

                </div>
                </div>
                <div class="columnbreak">
                <h3>
                Freiwilligenarbeit </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
                </ul>


                <ul>
                <h5>asien</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
                </ul>


                <ul>
                <h5>europa</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
                </ul>


                <ul>
                <h5>karibik</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
                </ul>


                <ul>
                <h5>lateinamerika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
                </ul>


                <ul>
                <h5>nordamerika</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
                </ul>

                </div>
                </div>
                <div class="columnbreak">
                <h3>
                Farmarbeit </h3>
                <ul class="test02">
                <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
                </ul>
                <div class="columnbreak-inner">


                <ul>
                <h5>afrika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
                </ul>


                <ul>
                <h5>europa</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
                </ul>


                <ul>
                <h5>lateinamerika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
                </ul>


                <ul>
                <h5>nordamerika</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
                </ul>


                <ul>
                <h5>ozeanien</h5>
                <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
                </ul>

                </div>
                </div>
                </ul>
                <div class="socialmenu">
                <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
                <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
                </div>
                </div>
                </div>


                and the css:



                .wrap-nav h3 a {color: #fff!important;}

                /*overlay*/

                .overlay {
                display: none;
                position: fixed;
                top: 0;
                height: 100%;
                width: 100%;
                background: #cb0000;
                opacity: 0.95;
                overflow: auto;
                z-index: 1000001;
                }
                .wrap {
                color: #fff;
                /* text-align:center; */
                max-width: 90%;
                margin: 0 auto;
                }
                .columnbreak {
                /* break-inside: avoid; */
                flex-basis: 33%;
                margin: 0 .5rem;
                }
                .columnbreak-inner {
                display: flex;
                flex-wrap: wrap;
                }

                .wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
                .wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
                .wrap hr {
                border: dashed #fff;
                border-width: 1px 0 0;
                clear: both;
                margin: 10px 0 10px;
                height: 0;
                }
                .wrap ul {
                margin: 0;
                }
                /*.wrap ul li {
                margin-bottom: 0.3rem;
                }*/
                .wrap ul.wrap-nav {
                border-bottom: 1px dashed #fff;
                padding: 3rem 0 1rem;
                /* column-count: 5; */
                display: flex;
                }
                .wrap-nav h2 {
                display: block;
                padding: 5px 0;
                text-decoration: none;
                color: #fff;
                font-size: 2.1rem;
                font-weight: bold;
                }
                .breiter {
                width: 40%!important;
                }
                .wrap ul.wrap-nav li {
                font-size: 20px;
                display: inline-block;
                vertical-align: top;
                width: 18%;
                position: relative;
                }
                .wrap ul.wrap-nav li a {
                color: #fff;
                display: block;
                padding: 2px 0;
                text-decoration: none;
                transition: all .2s linear 0s;
                -moz-transition: all .2s linear 0s;
                -webkit-transition: all .2s linear 0s;
                -o-transition: all .2s linear 0s;
                }
                .wrap ul.wrap-nav li a:hover {
                color: #fff;
                }
                .wrap ul.wrap-nav ul {
                padding: .8rem 0;
                /* border-bottom: 1px dashed #fff;
                /* margin-bottom: 1.5rem; */
                flex-basis: 50%
                }
                .wrap ul.wrap-nav ul li {
                display: block;
                font-size: 13px;
                width: 77%;
                color: #e9e9e9;
                }
                .wrap ul.wrap-nav ul li a {
                color: #fff;
                }
                .wrap ul.wrap-nav ul li a:hover {
                color: #fff;
                background: none;
                text-decoration: underline;
                }
                .socialmenu {
                text-align: center!important;
                padding: 2rem 0!important;
                }
                .socialmenu .button {
                color: #fff;
                border: 1px solid #fff!important;
                }
                .socialmenu .button:hover {
                color: #cb0000!important;
                background-color: #fff;
                }






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 17:12









                manuelJoaquimmanuelJoaquim

                29118




                29118






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428660%2fcolumn-count-and-page-break%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Create new schema in PostgreSQL using DBeaver

                    Deepest pit of an array with Javascript: test on Codility

                    Costa Masnaga