Responsive design adding breaks - desktop to tablet

Hello!

I thought I fixed this problem before, but it looks like I'm once again having issues with my site adding returns/breaks unexpectedly. Maybe you can help me find a fix for this.

This problem only pops up on the desktop when you shrink the window right before it switches over to the tablet layout. I'm not sure how I overlooked this but it looks like the full site is having this issue (menus included). I'll attach screenshots.

Link to page: https://www.intermusicsf.org/sfmd

I've tried adding a bit of CSS to fix this but haven't had any luck.
CSS used - " overflow-wrap: normal!important"

Thanks for any input!

 

Thanks for the fast reply! I tried adding the code and it seemed to slightly lower the moment when menu items on the top shift to a new line. I tried playing around with the min-width to see if I can find that perfect number to fix it but I haven't had any luck yet.
Screenshots below:

 

It looks like that fixed the top menu! Any ideas for the other fullwidth menu/modules?

 

Thanks for the help with the menu part of my problem, any ideas on a fix for the modules?

 

I'm still having issues with my toggle modules and call to action models resizing oddly.
link: www.intermusicsf.org/sfmd