.tp-wrap{max-width:1100px;margin:0 auto;} .tp-divider{max-width:900px;margin:0 auto;padding:0 20px 32px;} .tp-nav{display:flex;gap:8px;justify-content:center;max-width:900px;margin:0 auto;padding:0 20px;} .tp-tab{font-size:15px;font-weight:600;padding:10px 20px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;} .tp-tab.active{background:#16181d;border-color:#16181d;color:#fff;} .tp-section{display:none;} .tp-section.tp-active{display:block;} .tp-section .tq-wrap, .tp-section .ts-wrap{margin-top:24px;} /* --- the block's own width, against the theme's layout rule --------------- Block themes print a layout rule of their own - .wp-container-… > * - that clamps every child of the post content to the theme's content size (620px in Twenty Twenty-Four). It carries the same specificity as a plain class and lands in after our stylesheet, so it wins on order alone and the block is squeezed into a column meant for prose. Naming the content container puts our width back in front on specificity, without !important, which would also override the narrower widths this block sets for itself on small screens. Last in the file on purpose: @media adds no specificity, so a later plain rule wins on paper as well as on screen. */ .entry-content .tp-wrap, .wp-block-post-content .tp-wrap, .wp-site-blocks .tp-wrap{max-width:1100px;}