Андрей

Способ прост: побочным элементам делаем position: absolute, чтобы они не влияли на центрирование

Вот так: codepen.io/standys/pen/QwXKRb

1. Берете содержимое дива
2. Разбиваете на строки
3. Находите строку с картинкой
4. Ставите её куда вам нужно
5. Записываете обратно в див

вот пример: jsfiddle.net/acpcmzwo/1

В спецификации написано, что

Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups.

то есть «;» используется для разделения правил. Поскольку после последнего правила нечего разделять, то и разделитель не нужен.

Там же есть пример без разделителя в конце:

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Но хоть он и необязателен, лучше его всё-таки ставить. При добавлении новых стилей к этому селектору очень легко не заметить отсутствие разделителя, что может привести к непредсказуемым последствиям, и отнять время на отладке и стучании лбом по клавиатуре..

Если вы таким образом хотите сэкономить пару байт, то делаете это неправильно. Для этого лучше использовать минификатор. С ним будет и результат лучше, и разработке он не навредит.

Почитайте эту статью, написано просто и понятно: frontender.info/writing-efficient-css-selectors
Ответ на первый вопрос в этом абзаце

Зачем совмещать селекторы? Вы сами ответили, что кода будет меньше.

PS: не используйте такие миксины,
во-первых для этого есть autoprefixer,
во-вторых border-radius уже сто лет работает без префиксов

PPS: Заниматься оптимизацией селекторов css стоит только если у вас все остальное идеально

Решение с флексбокс (везде кроме ИЕ 9 и ниже)

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

jsfiddle.net/u9hpeemz/2

Там где тонны текста, у вас инлайн-стилем написано float: left, отсюда и проблемы.
И position: absolute тоже лишний

html и css сегодня — веселье и радость.
Вот так всё делается без обертывания:
codepen.io/standys/pen/yywPvy

.content {
  display: table;
  margin-left: 50%;
  transform: translateX(-50%);
}

С поддержкой браузерами более-менее ладно — работает в ИЕ начиная с 9.
caniuse.com/#search=transform

upd: подправил пример, вместо inline-block -> table

Подменю немного больше своей видимой части, поэтому визуально кажется что над ним есть пустое место.

Фотошоповский эффект при выделении: matthewjamestaylor.com/blog/animated-photoshop-sel...
Кратко: делаете подложку, которая больше требуемого блока на 1px в каждую сторону, и делаете подложке фон из анимированной картинки:

Нужно указать html: true

$('#example').popover({
  html: true
});

либо
<button data-html="true" ...>...</button>
getbootstrap.com/javascript/#popovers-options

Да, можно, есть аттрибут spellcheck:
<textarea spellcheck="false"></textarea>

Попробуйте неразрывный пробел:
Login or register