Issues with wrap text and text size on mobile - help!

Hi! I have two questions...

1. How do I prevent wrap texting on my entire site, excluding blogs?

2. How do I make the text in my navigation smaller so it's not split up like this image?

My website is GTMEnabler.com

Here is all the CSS code in my custom CSS (some of it attempted to solve this). Let me know if this is whats blocking it from working:
 

@media screen and (max-width:300px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    padding: 10px;
    position: static;
    height: auto !important;
    top: 0 !important;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: auto !important;
}
}
/* Custom CSS for reducing text size in mobile navigation */
@media screen and (max-width: 640px) {
  /* Adjust the font-size value as per your preference */
  .mobile-nav-item a {
    font-size: 10px !important;
  }
}

/* Equal list slide */
@media screen and (min-width:992px) {
[data-section-id="627473abe507fc6faa07f0d5"] li {
    align-items:center;
    min-height: 300px !important;
}
/* Header height */
.header-announcement-bar-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
}
.sqs-block-summary-v2 .summary-carousel-pager {
    display: block !important;
}
.portfolio-text {

  display: none;
}
.comment-count span {
    font-size: 30px !important;
}
/* Header height */
.header-announcement-bar-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
@media screen and (max-width: 640px) { 
    #block-627f0621357b994502063985>div>h3{
        font-size:1.5em;
    }
}
.page-section.vertical-alignment--top:not(.content-collection):not(.gallery-section):not(.section-height--custom)>.content-wrapper {
    padding-top: 0px !important; 
}
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 0vw !important;
    padding-bottom: 0vw !important;
}
[ data-header-style="dynamic" ].header {

  background-color : transparent;
  
  }
div.header-nav-folder-content a {
    color: black !important;
}
div.header-menu-cta a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}
blockquote {
  background-color: #F7F7F8;
  padding: 20px;
  border-left: 5px solid #ccc;
}
blockquote {
  margin: 0;
  padding: 20px;
  background-color: #f7f7f7;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

@media screen and (min-width: 768px) {
  blockquote {
    max-width: 800px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  /* Target mobile devices with a viewport width of 640px or less */
  p {
    white-space: pre-wrap !important; /* Allow line breaks but prevent text from wrapping */
  }
}

FWIW I'm not sure you want to do this. You can't control the size of the screen that your content will be displayed on, which means at some point, the text will have to wrap or else it will be so small that it will be hard to read, particularly on mobile view. Since most web traffic these days is on a mobile device, Google prioritizes mobile layout, and it will hurt your SEO if your text is too small or your clickable elements are too close together.

You can dynamically scale text to always fit a line without CSS. That's what the <A> option does in the text editor:

However, the font size across lines will only match if the text is all in the same block. Text in different blocks will scale to a different size depending on the length. It uses whatever size will fit that number of characters to the line, so you'll end up with mismatched fonts.

Yes. I need the lines on these services pages to be in one line. They look awful when split. If I adjust the size using the <A> option, it does it for both desktop AND mobile view. 

I also don't want my hearders to every be wrapped as well in desktop or mobile. 

The only text I want wrapped is long-form body text.

@qosmic

A really simple solution to the first issue would be to use different text blocks on desktop versus mobile, instructions here. Beyond that, hopefully someone here can help. I would not recommend it for the reasons mentioned above.

Does this mean I create two blocks of the same content and just hide one in mobile view and the other in desktop view?

....that seems very complicated

It has the benefit of being something you can do and only taking five lines of CSS versus the 99 you pasted above, but I understand it's not what you were hoping for. Perhaps someone here will have a better solution.