To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarly, for a 600px screen, the content would be 500px with 50px margins on each side. Now, I want to change the approach by setting the margin-left to (screenWidth-500)/2 and margin-right to 0. The width of the center content will no longer be fixed at 500px; instead, it will be (500 + whatever area of right margin). I am wondering if this can be achieved using CSS alone, as I have attempted using jQuery to calculate the margins when the window size is between 520 and 719px. However, I am open to suggestions for a more efficient solution. Would appreciate any advice on this matter.