Using calc() in Padded Containers

Okay, so now you're going to learn how to display full width elements 0:00 when placed inside padded containers. 0:04 Normally when you apply padding to a container, 0:07 the padding creates white space around its content. 0:10 It pushes content like images, paragraphs, and headings inwards. 0:13 Sometimes you don't want padding to effect all the elements in a container. 0:17 For instance, you might want white space around the text only, but 0:21 no space around an image above the texts. 0:25 Now there are several methods you can use to get around the padding and 0:28 it usually involves a little bit of math. 0:32 And the math gets trickier when you don't know the exact width of the container 0:34 because it's fluid. 0:38 So let's see how Calc can help us figure this out. 0:39 You can follow along in workspaces by clicking the Launch Workspace button 0:43 on this page. 0:47 So in the workspace, the index.html file contains a div container 0:48 with the class card, and inside card we have a heading and two paragraphs. 0:54 Now when we preview this page in the browser, 1:00 notice how the card container has padding on the left and right sides. 1:03 The padding adds extra white space around the text. 1:09 So now I want to add an image inside this container. 1:12 Back in my Index.html file inside the card container, 1:16 right about the h3 element, I'm going to add an image element. 1:20 And I want to add this mountians.jpg image inside the card container. 1:26 So as the source value I'm going to type mountians.jpg. 1:33 Then I'm going to open up my style.css file and 1:40 scroll down to this Calc Styles comment section here. 1:45 So right below the comment, I'm going to target the image element 1:49 and give it a max width of 100%. 1:55 So when we view it in the browser, the padding on the left and right sides of 2:00 the card container creates a gap on the left and right sides of the image. 2:04 Now I want the image to be the full width of its card container. 2:10 That would look much nicer. 2:14 So, we can take advantage of the calc function to get around this padding issue. 2:16 Back in the image rule, 2:21 I'm going to change the max-width value to a calc function. 2:22 So I'll type calc, and as the expression, 2:27 I'm going to type 100% + 3em. 2:31 Adding 3em to the total width of the image makes up for 2:35 the 1.5em padding on the left and right sides of the card container. 2:40 So when we preview it in the browser we can see how the image is now wider. 2:47 But, I still see a 1.5 m gap on the left side. 2:52 Now I can remove the 1.5m padding gap with a negative left margin. 2:57 So back in my image rule right below the max-width declaration. 3:02 I'm going to add a margin-left property, and 3:08 I'll set the value to -1.5em. 3:13 All right, so when I save the style sheet and refresh the browser, 3:16 we can see how the main image takes up the full width of its container. 3:20 While preserving the padding around the text. 3:25 So it's that simple. 3:29 The image also remains flexible and maintains its proportions no matter what. 3:30 So for instance if I go back to the style sheet, and scroll up to the card 3:35 rule here, and if I change the card containers width file to say 30%. 3:41 When I refresh the page, 3:47 notice how the image scales to the width of the card container. 3:49