If you study the HTML file closely, you notice that there are two “.child” elements nested in the “.container” element.
The CSS states that each “.child” element has a width of 150 pixels. So, since they appear side by side in the container (because of “display: inline-flex;”), their total width will be 300 pixels.
In the final example in the explanation section…
Shown above also by jorge-segura
the display: inline-flex; is within the .child element… rather than the .container element?
I thought that display: flex or display: inline-flex; were only used in the container elements to assign it to be a container?
As described in the page before
“To designate an element as a flex container, set the element’s display property to flex or inline-flex .”
If you look at the index.html files of the two lessons, I think the reason why you aren’t able to replicate the output is this line: <h1>Display: Block</h1>
If you make the changes you have made to the “previous lesson” as you have posted AND you delete the <h1> line I have mentioned AND then click the browser window to full screen (there is a fullscreen icon in the top right corner), you will see the effect of inline-flex as intended.
Conversely, you can go to the “current lesson” and in index.html, insert a <h1> element before the second container div and see what happens.