body { background: #eee; margin-top: 2em; } header { background-color: #eee; box-shadow: 0 0 1ex #444; display: flex; flex-wrap: wrap; left: 0; padding: 0 1ex; position: fixed; top: 0; width: 100%; width: -moz-available; & > span { flex-grow: 1; } span.user { flex-grow: 5; padding-left: 1em; text-align: right; } } div.group { display: flex; flex-flow: row-reverse wrap; .item { background: #ccc; border: 1px solid #333; display: flex; flex-basis: 210px; flex-flow: column; flex-grow: 1; justify-content: space-between; margin: .2em; padding: 1ex; text-align: center; h2, p { margin: .2em; } img { box-shadow: 0 .2em 1em -.2em #000; } } } ul.alltags, ul.allpeople, ul.allplaces { -moz-column-width: 13em; column-width: 13em; } #map { border: 1px solid #333; float: right; height: 8em; margin: 1ex; width: 40%; }