When I start website on mobile it's zoomed in and I have to zoom out with fingers

The viewport meta is okay, there are other options you can add but nothing that would solve your problem. Main issue is if your content isn't properly constrained, adjusting the viewport tag won't do much for you.

Let's start from the top -- you've got a fixed width set on your .main-component element -- this should ideally be a max-width if you're simply wanting to constrain content on larger screens, otherwise on small screens this element will still be 1280px wide and will thus extend beyond the visible viewport instead of wrapping.

The way you're scaling the image with absolute positioning is not something I would recommend personally, looks kinda weird -- if to use your approach, I'd simple set the image to display: block initially and include a @media query to adjust it to position: absolute on an appropriate width viewport.

You also have fixed widths set for your grid items. If you don't intend to use @media queries, the grid-template-columns property needs to be configured differently for a responsive layout. For example, a very quick alternative would be:

.grid-container {
  grid-template-columns: repeat(7, 1fr);
}

There are other ways to use grid repeat and I recommend you play around with them depending on what you want to achieve. Alternatively, consider flexbox or an old school grid system in conjunction with media queries.

You're deploying grid to align and wrap just a couple of options above the actual table structure, I would stick with something simple like inline-block for this.

.training-options {
  display: block;
  text-align: center;
  padding: 10px 10px 80px 10px; /* use padding instead of fixed heights */
}

.training-style1,.training-style2 {
  display: inline-block;
  text-align: center;
}

.training-style1 {
  /* padding-left: 350px; <- remove this */
}
.training-style2 {
  /* padding-right: 350px; <- and that */
}

grid is a cool, powerful tool, much like a pneumatic drill, but there's a time and a place for a pneumatic drill and there's a time and a place for a screwdriver.

The 'top nav' element is also giving you trouble, you're constraining the width but also using margins and floats, so that the content doesn't really end up in the right place as you scale down. Again, at this early stage in development, I'd use display: inline-block and text-align: center to get the look you want with little headache.

.topnav-centered {
  /* let the content fill the container, don't pad stuff out or else your container is going to push content all over the place 
  width: 50%;
  padding-top: 25px;
  margin: 0px auto; 
  padding-left: 180px;
  */
  text-align: center; /* this will center the dropdowns */
}

.dropdown {
  display: inline-block;
  padding: 10px; /* pad these if you want some space to them */
}

Finally, you've got a couple of buttons which you're floating with fixed margins -- to tidy this up, I recommend switching to display: inline-block

.pump-container {
  display: block;
  text-align: center; /* <-- this will centralise the two buttons */
}
.super-pump, .super-endurance {
  display: inline-block;  
  padding: 5px 10px 0px;
}

That will get you most of the way. The issue for you once you've addressed the problems I've outlined above is the text-sizing -- this is something you should address with media queries, with a base set of font-sizes for mobile and scale up for bigger screens.

I think the one issue from which all of your difficulties have stemmed is that you're designing for desktop first and trying to accommodate for mobile devices as an afterthought.

I recommend to everyone designing responsive websites:

• plan and design ahead for all screen mediums
• decide on your bare minimum supported platforms (I don't generally test on or plan for phones that are 10+ years old unless it's required to fulfil the brief)
• build your prototype for portrait mobile with predominantly block elements, and as you scale up you can use media queries to restructure data and UI to fill the space available.

It ends up being less work in the long run and you won't find yourself nudging things around by a couple of pixels for a specific viewport.