Very astute quote, salma_817. I like it. 
. If that is my only typo in that post, then I’m improving. 
Your English seems OK to me, although “final” did concern me and I explained why. It is much better than “poor”. On the other hand, you do not express your thoughts very completely. Perhaps you could say more to link them together.
My problem at the moment is that your requirements seem to have changed without explanation.
But you said that you could not change the HTML that you showed us in your first codePen.
When I cannot “connect the dots” or follow a person’s logic (thinking,path,goal), I usually ask questions - which I have - but most of my questions have not been addressed. I even tried numbering some of the questions but that was only marginally helpful.
Tell us again what your teacher requires so we can help you meet those requirements. You said that the HTML could not be changed from the semantic elements and you enumerated the behaviors needed in the CSS. I have been working with/around those requirements. You have not mentioned your other pages before now, but I assumed they would be written later after your were satisfied with the first page. It’s OK that they are already started or written but it does not make sense that the head of the page was written with code that is different from your original codePen. I believe that your goal is that they should all be the same in which case you could use shared CSS. The better method is the one that you showed us first. However there may be something about the div method that you prefer. If so, you need to explain the behavior (not the code) that you prefer so we can help you write code that matches the behavior. Don’t hesitate to be picky! 
I am in time zone GMT -5 (Eastern USA). What time zone are you in and what hours are you usually available to post on this forum. I can probably adjust my schedule to match yours so we can exchange more than one post every two days.
How to post code is explained early in our posting gudelines. If you have not read them already, please take some time and do so now. They are well written and very helpful.
It is explained that one can attach an image to a post by dragging and dropping the image into the post. Athough we request that code be posted as a visible “working page”, one can also drag and drop an HTML file and a CSS file into a post. So that is a choice you can make rather than writing codePens. That means that you can attach one or more of the other pages into a post and they will work the same for us as they do for you.
Moving on…
That statement does not explain why the code is different from your teacher’s requirements. I am still puzzled.
I don’t know either.
From codePen, I always copy the code to a file that I can open on my PC so I can troubleshoot it, so if you attach files rather than codePens it saves me a bit of time.
Sublime is a popular editor. Good choice for writing code.
Which code?
Change IDs to classNames except where IDs are needed (see post #24). Add “thead” and “tbody” to table. Consider adding div.outer (if you don’t know why, ASK.) Delete spaces around equals signs.
You have been given advice that you have not followed so I do not know what your priorities are. I cannot confidently check your code until I know how you want the page to look and behave. Please compare my recent post to yours in your browser and describe in detail the “look” that you want to see, THEN we can talk about code. Be sure to change the width of your browser window from wide to narrow as one of your tests. If your teacher does not require your page to be responsive, please state that, otherwise we expect responsive to be the norm nowadays.