@/Climatemapped Africa styling issues improvement.

[koechkevin]

Description

This PR fixes a few issues with climate mapped Africa

• Aligns climate Mapped Africa logo button with page sections
• Ensures the last element of navigation bar is aligned properly to the right.
• Ensures Legend for Hero Page section is aligned with the map and the adjacent section's Search bar
• Ensures carousel slides at 1 element per dot.
• Ensures How it Works Section image covers the whole area

Fixes #

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[kilemensi]

👍🏽 ... UI looks good (haven't checked the code).

1. Some slight alignment issues on Navbar and Hero still remain in lg

2. Is the map really clickable in `xs` and `sm` sizes (remember, users have to use fingers on mobile and tablet and not mouse pointers).

[koechkevin]

👍🏽 ... UI looks good (haven't checked the code).

1. Some slight alignment issues on Navbar and Hero still remain in lg

2. Is the map really clickable in xs and sm sizes (remember, users have to use fingers on mobile and tablet and not mouse pointers).

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.

[kilemensi]

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.

💯 @koechkevin ... we don't need it to be pixel perfect for now, lets just make sure it's not noticeable/obvious. And the fact that we can change zoom in the CMS, it means we can perfect it without code change, right?

[kilemensi]

[14:08:16] ERROR (payload): Error: cannot connect to MongoDB. Details: queryTxt ETIMEOUT cluster0.n82td2i.mongodb.net

PS: My Internet today is dog slow @koechkevin so don't wait for my approval; if others have approved, go ahead and merge.

[koechkevin]

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.

💯 @koechkevin ... we don't need it to be pixel perfect for now, lets just make sure it's not noticeable/obvious. And the fact that we can change zoom in the CMS, it means we can perfect it without code change, right?

We don't change zoom in the CMS, this is done in code

[kilemensi]

We don't change zoom in the CMS, this is done in code

Then you're on your own there @koechkevin 🏃🏽‍♂️

[koechkevin]

We don't change zoom in the CMS, this is done in code

Then you're on your own there @koechkevin 🏃🏽‍♂️

Moved to CMS