Problem: Horizontal Centering with margin: auto

Problem description

The container has a fixed width of 600px and contains a child element .box that is 200px wide. The task is to center the .box horizontally within its parent so that it sits exactly in the middle.

Goal

Position the .box exactly at 50% of the container’s width.

Constraints

You may only modify or add CSS properties. No additional HTML wrappers or JavaScript are permitted.

Sample visual output

Here’s what the output would look like:

Try it out

Implement your solution in the following coding playground: