Okay, so now you're going to learn how to display full width elements

when placed inside padded containers.

Normally when you apply padding to a container,

the padding creates white space around its content.

It pushes content like images, paragraphs, and headings inwards.

Sometimes you don't want padding to effect all the elements in a container.

For instance, you might want white space around the text only, but

no space around an image above the texts.

Now there are several methods you can use to get around the padding and

it usually involves a little bit of math.

And the math gets trickier when you don't know the exact width of the container

because it's fluid.

So let's see how Calc can help us figure this out.

You can follow along in workspaces by clicking the Launch Workspace button

on this page.

So in the workspace, the index.html file contains a div container

with the class card, and inside card we have a heading and two paragraphs.

Now when we preview this page in the browser,

notice how the card container has padding on the left and right sides.

The padding adds extra white space around the text.

So now I want to add an image inside this container.

Back in my Index.html file inside the card container,

right about the h3 element, I'm going to add an image element.

And I want to add this mountians.jpg image inside the card container.

So as the source value I'm going to type mountians.jpg.

Then I'm going to open up my style.css file and

scroll down to this Calc Styles comment section here.

So right below the comment, I'm going to target the image element

and give it a max width of 100%.

So when we view it in the browser, the padding on the left and right sides of

the card container creates a gap on the left and right sides of the image.

Now I want the image to be the full width of its card container.

That would look much nicer.

So, we can take advantage of the calc function to get around this padding issue.

Back in the image rule,

I'm going to change the max-width value to a calc function.

So I'll type calc, and as the expression,

I'm going to type 100% + 3em.

Adding 3em to the total width of the image makes up for

the 1.5em padding on the left and right sides of the card container.

So when we preview it in the browser we can see how the image is now wider.

But, I still see a 1.5 m gap on the left side.

Now I can remove the 1.5m padding gap with a negative left margin.

So back in my image rule right below the max-width declaration.

I'm going to add a margin-left property, and

I'll set the value to -1.5em.

All right, so when I save the style sheet and refresh the browser,

we can see how the main image takes up the full width of its container.

While preserving the padding around the text.

So it's that simple.

The image also remains flexible and maintains its proportions no matter what.

So for instance if I go back to the style sheet, and scroll up to the card

rule here, and if I change the card containers width file to say 30%.

When I refresh the page,

notice how the image scales to the width of the card container.