Why are my list items breaking in columns?

Question

I want to have the "bubbles" intact, but they aren't as you can see in the picture. I have tried break-inside: avoid; in all areas that are appropriate. Pardon the media screen I'm testing it out and when it works I will apply it to a handheld tag instead of a more appropriate size.

The Code:

 ol { padding: 1em; list-style: none; } li { background-color: wheat; border-radius: 1.5em; padding: .5em; font-size: 1em; margin: 1em; color: black; border: .25em solid lightblue; } nav { text-align: center; width: 20%; background-color: rgb(170, 70, 0); border-radius: 3em; position: absolute; left: 0%; border: .25em solid lightblue; top: 50%; margin: 2em; -webkit-transform: translate(0%, -50%); } div { position: absolute; left: 50%; width: 70%; transform: translate(-50%, 0%); height: 40em; } @media only screen and (max-width: 2560px){ ol { -webkit-column-count: 4; } li { break-after: always; } figcaption { break-before: always; } div { position: absolute; left: 50%; width: 80%; transform: translate(-50%, 0%); height: 40em; } nav { text-align: center; width: 100%; background-color: rgb(170, 70, 0); border-radius: 3em; position: absolute; left: 0%; border: .25em solid lightblue; top: 0%; margin: 0em; -webkit-transform: translate(0%, 0%); } } 

 <nav> <ol> <li> <h1 id="hOne">Peter Basolo</h1> </li> <li> <a class="start" href="unnecessary" title="The fun part">Start the adventure!</a> </li> <li> <a class="fb" href="unnecessary" title="My Facebook!"> <figure> <img src="facebook-logo.png" alt="This should be taking you to my facebook. Awkward." width="25" height="25" /> <figcaption>Stalk me!</figcaption> </figure> </a> </li> <li> <a class="ln" href="https://unnecessary" title="My Linkdin!"> <figure> <img src="linkedin-logo.png" alt="This should be taking you to my linkedIn. Awkward." width="25" height="25" /> <figcaption>Hire me!</figcaption> </figure> </a> </li> </ol> </nav> 

Answer 1

you have to just add display:inline-block in li tag.

 ol { padding: 1em; list-style: none; } li { background-color: wheat; border-radius: 1.5em; padding: .5em; font-size: 1em; display:inline-block; margin: 1em; color: black; border: .25em solid lightblue; } nav { text-align: center; width: 20%; background-color: rgb(170, 70, 0); border-radius: 3em; position: absolute; left: 0%; border: .25em solid lightblue; top: 50%; margin: 2em; -webkit-transform: translate(0%, -50%); } div { position: absolute; left: 50%; width: 70%; transform: translate(-50%, 0%); height: 40em; } @media only screen and (max-width: 2560px){ ol { -webkit-column-count: 4; } li { break-after: always; } figcaption { break-before: always; } div { position: absolute; left: 50%; width: 80%; transform: translate(-50%, 0%); height: 40em; } nav { text-align: center; width: 100%; background-color: rgb(170, 70, 0); border-radius: 3em; position: absolute; left: 0%; border: .25em solid lightblue; top: 0%; margin: 0em; -webkit-transform: translate(0%, 0%); } } 

 <nav> <ol> <li> <h1 id="hOne">Peter Basolo</h1> </li> <li> <a class="start" href="unnecessary" title="The fun part">Start the adventure!</a> </li> <li> <a class="fb" href="unnecessary" title="My Facebook!"> <figure> <img src="facebook-logo.png" alt="This should be taking you to my facebook. Awkward." width="25" height="25" /> <figcaption>Stalk me!</figcaption> </figure> </a> </li> <li> <a class="ln" href="https://unnecessary" title="My Linkdin!"> <figure> <img src="linkedin-logo.png" alt="This should be taking you to my linkedIn. Awkward." width="25" height="25" /> <figcaption>Hire me!</figcaption> </figure> </a> </li> </ol> </nav>