[Bug] Improper Alignment of Blue Boxes in Mobile View in program-index.html

## Description

In the mobile view, the blue content boxes ("Copyright" and "Better Internet") are not properly aligned and appear too large, disrupting the layout. This impacts readability and usability on smaller screens. This can be done by adjusting CSS .

## Reproduction

1. Open the webpage in a mobile view (e.g., using developer tools or a mobile device).
2. Navigate to the section with the blue content boxes.
3. Observe the misalignment and large size of the boxes.
4. See error.

## Expectation

The blue boxes should be properly aligned and scaled down to fit mobile screens, maintaining readability and a clean layout.

## Screenshots

## Environment

- Device: (_eg._ iPhone Xs; laptop)
- OS: (_eg._ iOS 13.5; Fedora 32)
- Browser: (_eg._ Safari; Firefox)
- Version: (_eg._ 13; 73)
- Other info: (_eg._ display resolution, ease-of-access settings)

## Additional context

There may be other layout issues on mobile, but addressing this particular issue at a time is will be better to avoid confusion.

## Resolution

- [x] I would be interested in resolving this bug.

Open program-index.html and reproduce the layout in a browser's mobile view, focusing on the blue "Copyright" and "Better Internet" boxes. Inspect the CSS affecting their alignment and size, then verify that both boxes fit the mobile screen, remain aligned, and preserve readability without disrupting the surrounding layout.

Written by the indexing model from the issue text.