For this problem set, I used the website theguardian:
you can find the directory for natours here
the HTML – CSS – imgs
<section id = "around-the-world" class="fc-container"> <div class="fc-container__inner"> <header class="fc-container__header js-container__header"> <div class="fc-container__header__title"> </div> </header> </div> <div class="fc-container--rolled--up-hide"> <div class="fc-slice-wrapper"> <!-- content begins here --> <ul class="u-unstyled"> <li class="fc-slice__item"> <div class="fc-slice__item"> <!-- liz cambage article begins here --> <div class="fc-item"> <div class="fc-item__container"> <!-- liz cambage article--> <div class="fc-item__container"> <div class="fc-item__media-wrapper"> <div class="fc-item__imagge-container"> <picture></picture> </div> </div> <!-- end of image beginning of content --> <div class="fc-item__content"> <a href=""></a> </div> <!-- code block repetiton for other items--> </div> </div> </div> </div> </li> </ul> </div> </div> </section>

Blogging question:
Inherited CSS Properties:
Font-family; Font-Size; Font-Weight; Font-family
Font styling and type are often inherited from the root.
Non-Inherited CSS Properties:
margins; widths; border-boxes; padding
most CSS properties dealing with the spacing of content are not inherited unless specified.
Differences between inline, block, and inline-block…
Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them.
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
while block elements use all available space and width.