0:00 Let's work out an exact pixel value that we can use for our main panel column here on desktop. I'll change the comment to s,ay "Main panel width calculation." We need to do some detective work to figure out the width of the card, and then deduct that space to calculate this one.

0:16 This is our card component, but you can see that the wrapper here sets a max width of 2XL. If I hover this class, you can see that it sets the max width to 672 pixels, so let's write that down to start with.

0:30 Then, we want to subtract from that the side panel width. That width is the width.56 and as we've seen in the previous lesson, that is 224 pixels. If we try to do 672 minus 224, we'll have a value of 448 pixels.

0:47 Let's try to replace our 350 pixels with 448, and that doesn't seem quite right. You can see that together, these side panel column and main panel columns are using more space than the card itself, and you might be able to figure out what's happening here.

1:03 You can see the card wrapper has this extra horizontal padding which comes from this PX-8 class, so the real width of the card is the values that we've calculated here, minus this padding gutter here on the left and on the right.

1:16 We have that PX-8 class here which sets padding left and right to 32 pixels, so in our calculation, we need to also subtract the padding 2 times 32 pixels or 64 pixels. The new value here will be 672 minus 224 minus 64, which is equal to 384 pixels.

1:38 Let's try update this. 384. Hit save, and boom! Now our grid columns are perfectly lined up with the card, and if I make the elements bigger, you can see that it works great. Now, we are not done yet.

1:52 You can see that if I make the viewport smaller, we will eventually hit a few problems where things get out of alignment, and we'll fix that in the next lessons.