# Building a Lobe Tour Website; Introduction; When working on the styling for my Lobe webpage, I encountered several CSS-related challenges that tested my patience and problem-solving skills. While I eventually found solutions, each step provided a valuable learning experience. Challenges: The text was overlapping with the image on smaller screens. Inconsistent font sizes due to responsive issues. Difficulty centering the content properly. Solution: I used flex-direction: column; for mobile screens while keeping flex-direction: row; for larger screens. Additionally, I used text-align: center; and set max-width on text blocks to prevent excessive stretching. For font responsiveness, I implemented @media queries to adjust sizes dynamically. 3. Footer Layout and Responsiveness The footer, which contained multiple sections and social icons, initially had layout problems, especially when viewed on smaller screens. Challenges: The footer columns were not stacking properly. The social icons were misaligned and appearing too small. Uneven spacing between different sections. Styling this webpage was both frustrating and rewarding. Each challenge forced me to improve my understanding of CSS layouts, flexbox, grid, and responsive design. Through troubleshooting and testing, I refined my ability to create a well-structured and visually appealing webpage.