Extra empty space/gap in webpage on large screen redulation

[ksnirob]

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

[SamA74]

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:-
https://mac.mbosuk.com/wp-content/uploads/2022/10/xts-theme_settings_default-1665766137.css
Line: 170.

[ksnirob]

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

[SamA74]

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.

[ksnirob]

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.

[SamA74]

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.

[ksnirob]

thank you so much for your help.