So this passes all the tests but one of the problems is I had to make the welcome section text appear higher up than it was to pass the ‘height of the welcome section should be equal to the height of the viewport’ test. Adding padding and margins seems to make it fail that test (ideally, it would be in the middle of the section rather than right below the nav bar).
Also, I don’t understand why the last 2 project tiles stack on top of each other rather than appearing beside one another (as with the previous project tiles), despite setting ‘display: inline-block’ for that section and setting a fixed width and height for each project tile?
Would be grateful for any help. Thanks in advance.
By default codepen has an annoying margin on the body element that can be overridded with margin:0
For the centering issue, one solution that would work is to put the text elements you want centered in a div and use flexbox to center it. You could do this by adding ’ display:flex; align-items:center; justify-content: center’ to the welcome section.
I’m on mobile so it was hard for me to see what you meant with the project boxes stacking, but is it possible the widths of the boxes are larger than the screen/containing element? If they cannot fit with their defined widths, they will not stay on the same line even if they are inline-blocks.
Thank you for your reply. Apologies for the delay in replying.
I’ve tried adding margin: 0 onto the body element but still no luck. It comes up with the error when I submit: “The height of #welcome-section is not equal to the height of the viewport : expected 710 to equal 540”. I’ve had a look at the padding and margins but have no idea where they get these numbers from?
Regarding the project boxes, I couldn’t really see any differences in the structure of the code for the last 2 boxes that were stacking but I copied and pasted the middle two boxes and then just substituted the image links and the text, and that solved the issue.