Welcome to the wild side!
I glanced at your code briefly, although I'm not entirely sure of your intentions. Nonetheless, you're off to a good start!
Since you've only solicited advice, allow me to share some time-saving tips with you. I wish I had known these tricks when I first delved into website design years ago, but we live and learn from our mistakes.
First and foremost, Stack Overflow favors specific questions over general inquiries. Broad questions are more likely to be downvoted and closed, so it's best to familiarize yourself with the rules before posting future queries.
On that note, I can offer a few tips here and there, but remember, my answer is just a small assistance, not an exhaustive guide!
So here it goes...
When crafting websites, always prioritize responsive design.
There are multiple methods for achieving responsive design:
Utilizing frameworks such as JQuery Mobile, bootstrap, RWD Retrofit, [etc];
Implementing it yourself by judiciously using min-width, width, min-height, padding, margin, and with the aid of media queries; (my personal favorite due to its flexibility).
Opt for percentage-based measurements instead of pixels for enhanced adaptability and flexibility. It's crucial to assign appropriate names to your divs and adhere to a logical design structure like header, main_container, and footer. These are basic practices that will save you from debugging spaghetti code headaches.
In essence, responsive design involves setting min-width, adjusting padding and margin to ensure your design adapts fluidly to different screens.
A little research on Google and W3 schools should set you on the right path!
If you require further guidance, feel free to experiment with a basic setup I've prepared. It's fully responsive:
Hope this serves as a valuable resource for you!