My codepen has a logo image on the left and ul menu on the right - after the menu finishes there is empty space to the right of the menu - how do I tell the menu to align to the right so that the empty space is to the left of the menu?
I have tried various things which have not worked such as
.flexbox-1-4 { border:2px solid red; display:flex; align-items: center; padding:4px; justify-content:space-between; }.left { flex:1; border:2px solid pink;}.right { flex:4; border:1px solid lime;}ul { list-style:none; border:2px solid cyan; display:inline-block;}ul li { display: inline-block;padding-right:18px;}<div class="flexbox-1-4"><div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wikimedia-logo-200px-transparent.png" width=100px></div><div class="right"><ul><li>Coffee</li><li>Tea</li><li>Milk</li><li>Water</li><li>Orange</li></ul></div></div>