has been taken up by the margin-left of this link. This class push-right can actually be added to any of the flex items, not just the last one. So, if I remove it from here and instead add it here, you'll see that now the margin to the left of the pricing has taken up all the additional spacing. What if I add it to both the elements? Then, the additional space is equally divided by both the margins. We can even use margin-right: auto instead of margin-left. So, we can change this to push-left, margin-right: auto, remove these and let me add push-left to the first item, that is the image, and then you'll notice that only the image has been pushed to the left and all the elements are to the right. So, the margin-right of the first list item has now taken up the additional space. So, auto margins combined with flex items is great for aligning individual flex items, especially

if we had only one section down here, we can set flex-grow as 1 to that section. That will make the section occupy all the additional space below the footer and so the footer will be at the bottom. But we have two sections. So, for this example, we can solve the problem using auto margin. All you need to do is to the footer element, add margin-top: auto;. Yes, that's all you need to do. See, the footer's top margin took up the additional space now and our sticky footer problem is solved. Great. There's one last thing I'd like to show you. Revisiting our example of centering our div, there's another way of centering it with flexbox using auto margins. If you remember, we centered this div using three lines of code on the parent container. display: flex;, justify-content: center; for horizontal alignment and align-items: center; for vertical alignment. But what we can also do is remove these two lines here.

parent container. Display flex, justify content center for horizontal alignment and align items center for vertical alignment. But what we can also do is remove these two lines here. We just have display flex on the parent now and now to the div that you wish to center, add margin-auto. No margin left, right, top. Margin on all four sides set to auto. This will give us the same result. The div is in the center. The margin on all four sides has taken up the available space in the container, placing the item at the center. Now you know two methods of centering the div using flexbox. You can follow any method that suits you.