Fix layout to make the form fits the screen without scrolling

First of all, @deomrd has done a great job on the current layout. The structure is **clean, well organized, and easy to read**, which shows good attention to detail and a solid understanding of how to structure a form interface.

While reviewing the current layout, I noticed that the form does not fully fit inside the screen when the page first opens. Because of this, the user has to **scroll down to see the bottom part of the form**, including the navigation buttons.

For this task, your goal is to adjust the layout so that the **entire form fits comfortably inside the screen on the first view**, without requiring the user to scroll on a normal desktop screen.

Take a moment to study the current layout and think about what might be pushing the content beyond the screen height. Sometimes this happens because of **large margins, padding, or fixed heights** inside the layout.

Start by reviewing these areas of the page:
- the main container `.form-container`
- the content section `.main-content`
- the navigation area `.navigation`

Look carefully at spacing values such as **large `margin-top`, padding, or fixed heights** that might make the page taller than the viewport.
Your objective is to create a layout that feels **balanced and centered**, where all the important elements are visible without scrolling when the page loads.

When the task is complete, the form should:
- appear centered on the page
- fit comfortably within the screen height
- maintain clean and consistent spacing