Extra empty space/gap in webpage on large screen redulation

in large display/screen there is gap on webpage at both sides. how can I remove these extra empty space?

here’s a screenshot. – https://snipboard.io/sTDY89.jpg

website url - https://mac.mbosuk.com

That looks to me like the “gutter” which is part of the design. It is defined by the max-width of the content containers, specifically this rule:-

.container {
	max-width: 1222px;

In the file:-
Line: 170.

1 Like

thanks for your reply. how can i reduce the gap on large screen like 1400px or 1500px

To reduce the gap, increase the width value to make the content wider.
To do this only for larger screens, put the rule in media query for that size.

1 Like

got your point. yes. i just want to increase the width in larger screens. would you please help me to know the media queries rule.

To target just larger screens you would use min-width in the query:-

@media screen and (min-width: 1500px) { 
    .container {
	    max-width: 1450px;

And increase the container max-width there.

1 Like

thank you so much for your help.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.