{"id":5032,"date":"2025-01-27T13:10:15","date_gmt":"2025-01-27T18:10:15","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5032"},"modified":"2025-01-27T13:11:59","modified_gmt":"2025-01-27T18:11:59","slug":"full-bleed-layout-with-modern-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/full-bleed-layout-with-modern-css\/","title":{"rendered":"Full-Bleed Layout with Modern CSS"},"content":{"rendered":"\n<p>I recently shared a trick on <a href=\"https:\/\/css-tip.com\/full-bleed-layout\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to create a Full-bleed layout<\/a> using a few lines of modern CSS code. If you are unfamiliar with such layout see the demo below. In this article we\u2019ll dig deeper into the idea and explain things as we go.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEBBoWj\" src=\"\/\/codepen.io\/anon\/embed\/vEBBoWj?height=450&amp;theme-id=47434&amp;slug-hash=vEBBoWj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEBBoWj\" title=\"CodePen Embed vEBBoWj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The main content area is limited to a certain width and centered but a few elements \u201cbleed\u201d to the outside edges, filling the entire page width. There are already a lot of techniques to create such a layout but the one I came up with relies on modern features and <em>only 4 lines of code.<\/em><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-attribute\">container-type<\/span>: inline-size;\n}\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">--_m<\/span>: <span class=\"hljs-built_in\">max<\/span>(<span class=\"hljs-number\">1em<\/span>, <span class=\"hljs-number\">50<\/span>cqw - <span class=\"hljs-number\">400px<\/span>\/<span class=\"hljs-number\">2<\/span>);\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">var<\/span>(--_m);\n}\n<span class=\"hljs-selector-class\">.full-bleed<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">calc<\/span>(-<span class=\"hljs-number\">1<\/span> * var(--_m));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>You might look at that code and think it\u2019s unreadable and hacky. If so, after we dissect it together, I hope to change your mind. You will soon understand the logic behind it and see it\u2019s actually a rather efficient way of handling this situation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why make <code>&lt;html&gt;<\/code> a container?<\/h2>\n\n\n\n<p>You might be familiar with viewport units such as <code>vw<\/code>. The use of <code>100vw<\/code> essentially means &#8220;the width of the browser window&#8221; a.k.a the viewport. It\u2019s common to rely on such a metric, but it comes with a drawback: whether or not you have a scrollbar <code>width: 100vw<\/code> will always give the same result. This is a bit frustrating and sometimes we wind up with unwanted overflow.<\/p>\n\n\n\n<p>Here is a quick demo to illustrate the issue:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dPbdrzX\/76c44dbc279cfcb0a93c2fa779a35749\" src=\"\/\/codepen.io\/anon\/embed\/dPbdrzX\/76c44dbc279cfcb0a93c2fa779a35749?height=450&amp;theme-id=47434&amp;slug-hash=dPbdrzX\/76c44dbc279cfcb0a93c2fa779a35749&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dPbdrzX\/76c44dbc279cfcb0a93c2fa779a35749\" title=\"CodePen Embed dPbdrzX\/76c44dbc279cfcb0a93c2fa779a35749\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The container has a height equal to 500px. If the page is tall enough to show the whole container, everything is fine but once the height gets smaller and we need to scroll the page, <em>another<\/em> scroll appears at the bottom!<\/p>\n\n\n\n<p>Ideally, we want <code>100vw<\/code> to behave differently, but it won\u2019t, so we have to find something else. You&#8217;d think the advent of the <code>dvw<\/code> unit would have been an opportunity to fix this, <a href=\"https:\/\/web.dev\/blog\/viewport-units#:~:text=None%20of%20the%20viewport%20units%20take%20the%20size%20of%20scrollbars%20into%20account.\">but it does not<\/a>. <\/p>\n\n\n\n<p>Making the <code>&lt;html&gt;<\/code> element a container is one solution because it will unlock the ability to query the width of the html (instead of the whole page) by using <code>100cqw<\/code>. Since the <code>&lt;html&gt;<\/code> element is the uppermost element of the page and it is a block-level element it will always (unless you override this behavior) have the width of the page while considering the scrollbar. In other words, <code>100cqw<\/code> will get smaller when a scrollbar appears on the page \u2014 which is perfect!<\/p>\n\n\n\n<p>Here is the previous demo using <code>100cqw<\/code> instead of <code>100vw<\/code>. No more issue this time!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LEPQazG\/2b8a0485694daac9440eab25e2f97958\" src=\"\/\/codepen.io\/anon\/embed\/LEPQazG\/2b8a0485694daac9440eab25e2f97958?height=450&amp;theme-id=47434&amp;slug-hash=LEPQazG\/2b8a0485694daac9440eab25e2f97958&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LEPQazG\/2b8a0485694daac9440eab25e2f97958\" title=\"CodePen Embed LEPQazG\/2b8a0485694daac9440eab25e2f97958\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Instead of relying on <code>100vw<\/code> like most of the techniques, I will use <code>100cqw<\/code> which is slightly better and for this, I have to make the <code>&lt;html&gt;<\/code> element a container.&nbsp;<\/p>\n\n\n\n<p class=\"learn-more\">I am deliberately skipping the explanation of what &#8220;container&#8221; means to avoid making this article too long. If you are unfamiliar with this, it refers to the relatively recent ability in CSS to do &#8220;container queries&#8221;. <a href=\"https:\/\/frontendmasters.com\/blog\/container-queries-and-units\/\">Check out this article.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What about <code>margin<\/code>?<\/h2>\n\n\n\n<p>If I told you we need a container with a <code>max-width<\/code> which is centered horizontally, you will like intuitively do this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">400px<\/span>;\n  <span class=\"hljs-attribute\">margin-inline<\/span>: auto; <span class=\"hljs-comment\">\/* or: margin: 0 auto; *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is fairly simple, efficient, and people with basic CSS experience will understand it. I&#8217;d advise you to keep doing this, but we can also do the same using <em>only<\/em> margin like I detail in my post <a href=\"https:\/\/css-tip.com\/center-max-width\/\" target=\"_blank\" rel=\"noreferrer noopener\">max-width + centering with one instruction<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"387\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/01\/MwCcy4QIP0-746.png?resize=746%2C387&#038;ssl=1\" alt=\"\" class=\"wp-image-5038\" style=\"width:617px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/01\/MwCcy4QIP0-746.png?w=746&amp;ssl=1 746w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/01\/MwCcy4QIP0-746.png?resize=300%2C156&amp;ssl=1 300w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/figure>\n<\/div>\n\n\n<p>If the container needs to have a <code>max-width<\/code> equal to <code>w<\/code>, then the remaining space on both sides is equal to <code>50% - w\/2<\/code> where <code>50%<\/code> refers to the parent width. If we define the <code>margin<\/code> using that space, we have what we want.&nbsp;<\/p>\n\n\n\n<p>It may be a bit counter-intuitive, but it&#8217;s logical. We either define the <code>width<\/code> and tell the browser to calculate the margin for us (using <code>auto<\/code>), or we do the opposite and define the <code>margin<\/code> then the browser will calculate the width for us. Unlike <code>margin<\/code>, the default value of width is already <code>auto<\/code> so defining the <code>margin<\/code> is enough.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">max<\/span>(<span class=\"hljs-number\">0px<\/span>, <span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">600px<\/span>\/<span class=\"hljs-number\">2<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I am using <code>max()<\/code> to avoid getting negative values on small screens. In other words, I am clamping the value to <code>0<\/code>.<\/p>\n\n\n\n<p>Let\u2019s suppose that the <code>margin<\/code> is equal to <code>100px<\/code> at some points. If an element inside the container has a margin equal to the opposite (i.e. <code>-100px<\/code>) it will negate the previous margin and extend to the full width of the container.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gbYKXMb\/e8d87496fe89b9e5466fbc8f16277e04\" src=\"\/\/codepen.io\/anon\/embed\/gbYKXMb\/e8d87496fe89b9e5466fbc8f16277e04?height=450&amp;theme-id=47434&amp;slug-hash=gbYKXMb\/e8d87496fe89b9e5466fbc8f16277e04&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gbYKXMb\/e8d87496fe89b9e5466fbc8f16277e04\" title=\"CodePen Embed gbYKXMb\/e8d87496fe89b9e5466fbc8f16277e04\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Do you see the trick now? The same margin used to set the <code>max-width<\/code> and center the main container is also used (with a negative sign) on the \u201cfull-bleed\u201d elements to make them \u201cbleed\u201d outside the container and extend to the edge of the screen!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">--_m<\/span>: <span class=\"hljs-built_in\">max<\/span>(<span class=\"hljs-number\">0px<\/span>, <span class=\"hljs-number\">50%<\/span> - <span class=\"hljs-number\">600px<\/span>\/<span class=\"hljs-number\">2<\/span>);\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">var<\/span>(--_m);\n}\n<span class=\"hljs-selector-class\">.full-bleed<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">calc<\/span>(-<span class=\"hljs-number\">1<\/span> * var(--_m));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The margin is defined as a custom property and is used twice: on the main container, and with a negative sign on the \u201cfull-bleed\u201d class.<\/p>\n\n\n\n<p>It looks perfect but the above code won\u2019t work! Be careful \u2014 I&#8217;ve tricked you!<\/p>\n\n\n\n<p>We are using <em>percentage<\/em> values which means the reference for the calculation is not the same for both elements so both margins will never be equal (I know: percentages are always frustrating).&nbsp;<\/p>\n\n\n\n<p>I think you know what will be the solution, right? We rely on the <code>cqw<\/code> unit we detailed previously to make sure the reference is always the same (the width of the page while considering the scrollbar).&nbsp;<\/p>\n\n\n\n<p>With that our puzzle is complete! A full-bleed layout with a simple code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-attribute\">container-type<\/span>: inline-size;\n}\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">--_m<\/span>: <span class=\"hljs-built_in\">max<\/span>(<span class=\"hljs-number\">0px<\/span>, <span class=\"hljs-number\">50<\/span>cqw - <span class=\"hljs-number\">600px<\/span>\/<span class=\"hljs-number\">2<\/span>);\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">var<\/span>(--_m);\n}\n<span class=\"hljs-selector-class\">.full-bleed<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">calc<\/span>(-<span class=\"hljs-number\">1<\/span> * var(--_m));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As a bonus, you can replace the <code>0px<\/code> inside the <code>max()<\/code> function with any value and it act as a &#8220;minimum margin&#8221;. That is, the <code>margin<\/code> that your main container will have on small screens.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Another way to write the code<\/h2>\n\n\n\n<p>Now that we know how it works, let\u2019s re-write the code in a bit more friendly-to-read way:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-attribute\">container-type<\/span>: inline-size;\n}\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">--w<\/span>: <span class=\"hljs-number\">600px<\/span>; <span class=\"hljs-comment\">\/* the max-width *\/<\/span>\n  <span class=\"hljs-attribute\">--m<\/span>: <span class=\"hljs-number\">1em<\/span>;   <span class=\"hljs-comment\">\/* margin on small screen *\/<\/span>\n  \n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">max<\/span>(   var(--m),<span class=\"hljs-number\">50<\/span>cqw - <span class=\"hljs-built_in\">var<\/span>(--w)\/<span class=\"hljs-number\">2<\/span>);\n}\n<span class=\"hljs-selector-class\">.full-bleed<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(-<span class=\"hljs-number\">1<\/span>*var(--m),<span class=\"hljs-built_in\">var<\/span>(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw);\n  <span class=\"hljs-comment\">\/* same as\n  margin-inline: calc(-1*max(var(--m),50cqw - var(--w)\/2))  \n  *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is <em>slightly<\/em> better because all you have to do is update a few custom property values. With this syntax, we can also create more variations where we can update the margin behavior of the \u201cfull-bleed\u201d elements.<\/p>\n\n\n\n<p>If, for example, we replace <code>-1*var(--m)<\/code> with <code>0px<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.full-bleed<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(<span class=\"hljs-number\">0px<\/span>, var(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The elements will have a <code>margin<\/code> equal to <code>--m<\/code> on small screens. In other words, the elements lose their \u201cbleed-out\u201d behavior on small screens.<\/p>\n\n\n\n<p>I came up with a total of four variations (including the default one):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.full-bleed-1<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(-<span class=\"hljs-number\">1<\/span>*var(--m),<span class=\"hljs-built_in\">var<\/span>(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw);\n}\n<span class=\"hljs-selector-class\">.full-bleed-2<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(-<span class=\"hljs-number\">1<\/span>*var(--m),<span class=\"hljs-built_in\">var<\/span>(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw + <span class=\"hljs-built_in\">var<\/span>(--m));\n}\n<span class=\"hljs-selector-class\">.full-bleed-3<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(        <span class=\"hljs-number\">0px<\/span>,var(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw);\n}\n<span class=\"hljs-selector-class\">.full-bleed-4<\/span> {\n  <span class=\"hljs-attribute\">margin-inline<\/span>: <span class=\"hljs-built_in\">min<\/span>(        <span class=\"hljs-number\">0px<\/span>,var(--w)\/<span class=\"hljs-number\">2<\/span> - <span class=\"hljs-number\">50<\/span>cqw + <span class=\"hljs-built_in\">var<\/span>(--m));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is a demo to illustrate the behavior of each one. <a href=\"https:\/\/codepen.io\/t_afif\/full\/PwYYMRX\">Make it full screen<\/a> and resize it to understand each variation.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwYYMRX\" src=\"\/\/codepen.io\/anon\/embed\/PwYYMRX?height=450&amp;theme-id=47434&amp;slug-hash=PwYYMRX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwYYMRX\" title=\"CodePen Embed PwYYMRX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Restricting the Content of the Full Bleed Section to the Same Width as the Rest of the Main Content<\/h2>\n\n\n\n<p>Let&#8217;s end with one last demo where it&#8217;s only <a href=\"https:\/\/css-tip.com\/overflowing-background\/\" target=\"_blank\" rel=\"noreferrer noopener\">the background color that extends to the edge of the screen<\/a>. The content is still restricted to the same maximum width as everything else. This is a particular case of full-bleed layout where we don\u2019t need to mess with margin and complex calculation, and has an entirely different trick up it&#8217;s sleeve. I&#8217;ll leave it to you to poke at the code and see it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNEaqQX\" src=\"\/\/codepen.io\/anon\/embed\/oNEaqQX?height=450&amp;theme-id=47434&amp;slug-hash=oNEaqQX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNEaqQX\" title=\"CodePen Embed oNEaqQX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This demo relies on a single line of code where I&#8217;m using the outset feature of <code>border-image<\/code> to have overflowing coloration on both sides. The <code>border-image<\/code> property is a bit tricky to grasp, but I have a detailed article if you want to learn more about it: &#8220;<a href=\"https:\/\/www.smashingmagazine.com\/2024\/01\/css-border-image-property\/\">The Complex but Awesome CSS border-image Property<\/a>&#8220;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Cool, right? Not only have we created a full-bleed layout with compact code but we can easily adjust it to control the margin behavior of the elements. Can you think of other variations? I am sure we could tweak the formulas to have other useful and interesting behaviors. The comment section is down below if you have some good ideas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue. <\/p>\n","protected":false},"author":12,"featured_media":5044,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7],"class_list":["post-5032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/01\/fullbleed.png?fit=1624%2C986&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5032"}],"version-history":[{"count":10,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5032\/revisions"}],"predecessor-version":[{"id":5072,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5032\/revisions\/5072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5044"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}