First and foremost, a huge thank you to everyone who has assisted me in resolving numerous issues related to my basic layout and syntax. I believe I have successfully cleaned up my syntax, and my CSS and HTML development are progressing smoothly.
Now, let's address the current challenges I am facing:
I'm currently dealing with spacing between the top navigation area and the image in the following div. This spacing only appears at certain zoom levels, and I need to ensure it never shows up. I've tried removing white space, eliminating borders/padding from classes, but haven't attempted negative margins on the bottom of Nav divs yet. I really want to resolve this issue without resorting to 'hacking' it with negative margins.
BONUS: Why can't I achieve an actual 100% width for the topImage class (which contains the .png file under the nav)? Despite several tweaks, I keep encountering padding on the sides. While not a critical problem, I prefer it to be 100% width so that it seamlessly integrates with other top elements and presents a cleaner look when connecting to .bodySection2 and .section divs featuring orange boxes.
This one is quite bothersome. The class, .section, representing the orange blocks on the page is identical programmatically. I meticulously adjusted widths and spacing to center them perfectly within the .bodySection2 div, which I'm content with. However, as depicted in the screenshot below, each box varies in size, even though they're assigned the same Height % in the CSS. Even after setting Height: XX% and ensuring all parent heights are defined in percentage, there's no apparent impact. Any guidance on how to standardize the box sizes irrespective of their content would be greatly appreciated.
View the Fiddle here: Fiddle Here
Furthermore, any suggestions, advice, thoughts, comments on the layout, color scheme, navigation elements, or any other aspects are warmly welcomed! I'm currently in the process of rebranding my company, and naturally, the website plays a crucial role in promoting my brand.
HTML :
<!DOCTYPE html>
<html lang="en">
...
</html>
CSS:
body {
...
}
...
} /*closes @ mediaedia screen and (min-width:30em */