fix: Vertically Align Navbar Items with Brand Name

[Teja-11]

This pull request addresses a layout issue in the header navigation where the navbar items were not aligned vertically with the brand name. By applying inline CSS styles, we ensure that the navbar-toggler, navbar-brand, and navbar-collapse are centered along the same line, improving the visual coherence of the header. The implemented changes use flexbox to align items centrally and apply auto margins to manage spacing, making the header appear more structured and aesthetically pleasing across various screen sizes.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (79bd3c4) 94.03% compared to head (311e21f) 94.30%.
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #12      +/-   ##
==========================================
+ Coverage   94.03%   94.30%   +0.26%     
==========================================
  Files           9        9              
  Lines         151      158       +7     
==========================================
+ Hits          142      149       +7     
  Misses          9        9              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Niloth-p]

No visible changes to the vertical alignment.

The alignment issue most probably has to do with the hierarchy of elements with bootstrap classes, not their styling. Also, it's not a good idea to use inline styles to override a lot of the bootstrap styling this way.

[Niloth-p]

I'll be adding more modular issues in a couple of weeks.
I'm planning to redesign the header a bit as well, then. Will break it down into small issues.
Hang tight!