Https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-html-tables/projects/html-wine-festival-schedule

So I was completing the wine festival schedule and I figured I would see how my finished code would look in an actual browser (Google Chrome as well as Safari), however, I noticed that the padding for the data cells in the table were more so than in the Codecademy code editor and accompanying browser view. I’ve attached photos to the post to show you what I mean. It looks right in the Codecademy view but not in Chrome or Safari. The CSS and HTML codes used in both the CA browsers and my preferred browsers are exactly the same, yet render differently. Wondering if anyone could offer some input! Thank you in advance.

1 Like

Hello, and welcome to the forums!

It looks like you haven’t included the reset.css file that the one on Codecademy uses. You may not have noticed this file because it isn’t one of the files that appears automatically, but you can see it in the list of files if you click the little folder icon to the top-left of the editor. It’s already being included in the <head>

Here’s what it looks like on Codecademy with the reset.css file removed:

The purpose of reset.css is to eliminate the default styles that browsers come with automatically, including the padding that you ran into here.

2 Likes