The Layout Challenge

In my personal portfolio project, I recently encountered an issue where elements were unexpectedly overflowing their containers. It is a common frustration: you set a width, add padding, and suddenly your component is wider than intended. This happens because of the default CSS box model, where padding and borders are added to the specified width and height.

A cluttered navigation bar is the digital equivalent of a messy entryway: it’s the first thing visitors see, and if it's misaligned, the entire professional impression suffers. Recently, while working on my personal portfolio, I found that small inconsistencies in the navbar layout and language toggle were creating unnecessary visual noise.

The Problem: When Layouts Drift

The Problem

As my portfolio project grew, inconsistent spacing between sections began to create a disjointed visual experience. Elements felt crowded in some areas and oddly isolated in others, leading to a loss of rhythm that distracted from the core content.

The Approach

To restore balance, I moved away from hard-coded, case-by-case margin adjustments and transitioned toward a