Илья Бирман уже ответил на вопрос, но я хочу добавить свои пять копеек.
Универсального решения по выравниванию текста и плашек нет. Каждый раз приходится думать и выбирать, как сделать. Ведь бывает хорошо и когда плашка торчит налево, и когда она выровнена по общему краю, а её текст смещён вправо. Сами мучаемся.
А иногда на выбор влияет не только чувство прекрасного, но и согласованность с другими элементами, технические возможности и другие факторы.
Например, до обновления сайта бюро страница совета выглядела так:
Вопроса, как выравнивать плашки относительно текста, толком не стоит. Логотип на плашке прямо таки просит выровняться с ним. Более того, внутренние отступы у логотипа и плашек одинаковы.
После обновления на всех страницах изменилась шапка и подвал, но содержание в большинстве случаев не изменилось. Например, в советах остались старые плашки, которые торчат налево. Переделка внешнего вида советов — долгосрочная дизайнерская и техническая задача. Нельзя просто так взять и поменять верхушку страницы. В то же время торчащая влево лёгкая фоновая плашка выглядит прилично:
Наверняка мы тут что‑то поменяем, когда обновим советы.
Торчащая за текст контрастная плашка, как правило, смотрится неуместно. Например, меню на странице Коворкафе живёт на чёрной плашке, которая выровнена по тексту страницы. Текст меню слегка смещён вправо:
А бывает, что хорошо поставить на плашки абсолютно всё. На главной странице
Кстати, обратите внимание, что меню и надпись наверху шапки выровнены по тексту, а плашка выбранного пункта торчит налево. Тоже неплохо.
Иногда от мучительного выбора можно уйти, растянув плашку от края до края. На странице учебника «Управление проектами, людьми и собой» вступительный рассказ о книге живёт на цветной плашке до краёв окна. Содержание плашки выровнено и с меню, и с остальным текстом на странице:
Рекомендую не злоупотреблять этим приёмом, не то получите матрас. А то и вот такое:
Ну и наконец, бывает, что небольшими торчащими штуками можно пренебречь. На страницах проектов бюро плашка выбранного пункта меню слегка торчит налево, но никто не умер:
Приглашаю уважаемых советчиков поделиться своими примерами.
P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.