I cannot add extra files (I think?) to codepen, so those extra spaces after the external links are for the external image file I’m adding to indicate external links, and of course since I couldn’t upload the font files it’s using my fallback font instead.
Any comments are much appreciated, but I also have a specific question. I wanted to line up the tops of each of the three main columns (“Brave new world”, “Top course choices”, and the nav bar). I did this by using the developer tools to discover that the margin on those top h2’s was 26.56px, and then manually set that for the nav bar. But is there a more natural way to “inherit” that number directly from somewhere? Or should I have instead explicitly set those margins to be something?
Ah, thanks for the reference to Cecil’s—I’ve now fixed the “external link” image based on that! Looking at this has prompted two followup questions:
I notice that for the nav bar, Cecil chose to apply the main styling to the nav li elements, and I chose to apply it to the nav a:any-link (since I learned while debugging that something like a:link from higher in my CSS also has higher specificity than plain old nav a, which led to some issues with the border ). But the end result looks roughly the same. Do you know if it matters whether one styles nav li vs nav a:any-link?
Cecil’s spacing between the header & nav looks good (i.e. equal to spacing between header & h2 in body), but he doesn’t seem to have needed to manually adjust it like I did. Why not?
I have been a bit busy.
Question 2 I believe the reason is that you are using a font size which is a constant rather than a relative size. Change it to 1.6em or 1.6rem and you should find that the the section, aside and nav to align correctly.
With question 2 let me have a look. I have never used the psedo selector any-link.
). But the end result looks roughly the same. Do you know if it matters whether one styles nav li vs nav a:any-link?