CSS break media on content instead of screen size [migrated]

I was trying different solutions to use @media in css (or to be more precise, sass) and was thinking about the way we commonly use @media. The most common way, at least that I know and I see on blog posts, tutorials, etc.. Is to define some standard values and then we use them. For example:

$small: 420px;
$medium: 768px;
$large: 992px;
$extra-large: 1200px;

@media screen and (min-width: $medium) { ... }

@media screen and (min-width: $large) { ... }

The problem I'm facing with this approach is that my menu doesn't fit well any of the predefined values. So when it break the media size, it gets a huge blank space, even thought there is still space to fit the menu. In this case I could break it at 780px but the values are 768 or 992.

So my question is.. Is it okay to approach media queries this way and break the media based on content by defining the values manually?

The menu would be 780px, let's say that a grid that I display the company members would break at 820px and 540px. Each of them I would need to analyse it visually on the browser, measure and set the value manually.

I would still use (if there's not a better way) the pre defined values for common elements on the page (if needed). There is this article that I like a lot (a little out of date but a good concept), it covers the screen size usage and how to group them. But it doesn't approach the issue I'm questioning here.

Also, other big companies, like Airbnb, Spotify, Github they use predefined values to break the @media content. All based on predefined values, not the content. Spotify is one example. The menu breaks too soon, even with enough space to keep the items before moving to aside off screen.

--

The only reason I can think of to keep using this method is because we, as end users, are so used to have a menu toggle on the top header that it doesn't matter if there is enough space to keep the inline text. Since we are used to the button to open the menu, we use this technique, hence the use of pre defined media values.