Content width is the horizontal dimension of the page. When the width of the content is larger than the width of the browser window, and it does not fit, the browser adds a horizontal navigation bar so that the content can be scrolled from left to right, this is called the X scroll. Conversely, when the content adapts to the width of the browser window, the page is said to be "responsive".
The presence of a scroll X is detrimental to the user experience: horizontal scrolling is not intuitive for users, they don't have the reflex to scroll pages from left to right. If users have a bad experience, they may come back to the SERP and click on another more suitable site which affects your ranking.
In most cases, it is at the level of CSS styles that you have to intervene and set up "media queries". These instructions allow you to define CSS properties according to the dimensions of the browser window.
Example of the use of "media queries" :
<html>
<head>
<title>My responsive page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* default width */
.bloc {
display: inline-block;
width: 100%;
}
/* Overriding the width of the blocks when the browser window is at least 600px */
@media screen and (min-width: 600px) {
.bloc {
width: 30%;
}
}
</style>
</head>
<body>
<h1>My content is adapted</h1>
<div class="bloc">Bloc A</div>
<div class="bloc">Bloc B</div>
<div class="bloc">Bloc C</div>
</body>
</html>
When the browser window is 600px or more, the blocks are aligned, otherwise they are stacked. For more information on media queries and responsive, check Google's article.
Another method exists to not make the horizontal navigation bar appear when the content is larger, it consists in hiding what is overflowing thanks to a CSS instruction "overflow: hidden;". This method is to be avoided since it hides the eventual content from the user and the user cannot display it at all.