How do I make my bulma progress bar not go over the whole screen?

Add max-width: <size>;, f.e. to adjust your progress bar width.

/* progress wrapper to show adjusted progress size */
.progress-wrapper {
  background-color: #ff6a0075;
  padding: .2rem;
}

.progress {
  /* width prop added for example purpose, to simulate wide bar */
  width: 100%;
  max-width: 200px;
}

<div class="progress-wrapper">
  <progress class="progress is-warning" value="25" max="100">25%</progress>
</div>

This is hard to answer without knowing more about your layout. Bulma is an opinionated CSS framework whose simplicity comes from not piling on custom CSS for each component. So, add a max-width manually will work, but that's not the first tool I would advise reaching for with Bulma.

Do you want to put something else on the same line as the progress bar? If so, it might be better to put that thing and the progress bar in columns of the appropriate width. Or maybe tiles fit your layout needs better.

Do you want to center your progress bar on the screen, but have it stay to a reasonable width on larger screens? That's what a container is designed for.

And if you do end up wanting to use max-width (which again, consider using one of the options Bulma already provides), I would suggest adding a general decorator class like is-max-width-large or some such, and add that to your progress bar, rather than adding CSS specifically for progress bars, which conflicts with the rest of how Bulma works, and will make things more difficult to maintain.