Update a complete disaster!

Hi
I, like many others on here, recently updated my theme only for it to look completely diabolical! It didn’t even resemble a website, all I could see was a massive x – not even sure where that came from, a huge logo, some text off to one side, just awful to be honest! I quickly re-installed a back up to version 2.1.8 and luckily all is ok at the moment but I am now dreading trying to update again. I do not have the time to re-build so am thinking of moving to a new theme. I have been working with WordPress for over 10 years now and have never seen an update go so bad!

I have a child theme, which from reading the others, seems to be the main issue, with quite a bit of css. I understand these now need updating, but I can’t seem to find a list of the new info.

h1 {
font-size: 24px!important;}
h2 {
font-size: 22px!important;}
h3 {
font-size: 16px!important;}
h4 {
font-size: 16px!important;}



/* Home page hide title */
.page-id-107 .entry-title{
display:none !important;
}
.page-id-107 .main-content-section {
padding-top: 0px;
}
.page-id-107 #main {
padding-top: 0px;
padding-bottom: 0px;
background-color: #ffffff;
}

/* Nav background colour */
#site-navigation {
    background-color: #00abcb;
}

/* Nav background colour drop down */
.main-navigation ul li ul li {
  background: #00abcb;
}
/* Search Box */
input.s {
    width: 75%;
}
/* Footer widget spacing */
@media screen and (min-width: 600px) {
    .tg-footer-main-widget {
        width: 25%;
    }

    .tg-footer-other-widgets {
        width: 72.368421%;
    }
	
/* Footer titles spacing */
.footer-widgets-area .widget-title span {
    padding: 10px 10px 8px 10px!important;
    display: inline-block;
}

/* Author off posts */
.below-entry-meta .byline {
  display: none;
}

/* Display adsense header */
#header-left-section {
    width: 25%;
}
#header-right-section {
    width: 75%;
}
@media screen and (max-width: 768px) {
    #header-left-section, #header-right-section {
        float: none;
        width: 100%;
    }
}
#header-right-section .textwidget p br {
    display: none;
}
#header-right-section .textwidget p {
    margin-bottom: 0;
}

/* Footer colour */
.footer-socket-wrapper {
background-color:  #00abcb!important;}
}
.footer-widgets-wrapper {
background-color:  #00abcb!important;
}
.footer-widgets-area .widget-title span {
    padding: 6px 1px;
    display: inline-block;
}

/* Footer seperator lines */
#colophon .widget ul li {
    border-bottom: 1px solid #ffffff!important;
}
/* Footer copyright */
.footer-socket-wrapper .copyright {
    color: #ffffff!important;
}
.footer-socket-wrapper .copyright {
    background-color: #00abcb!important;
}
.footer-socket-wrapper {
    background-color: #00abcb!important;
}
.footer-socket-wrapper .copyright {
    max-width: 100%;
}
/* Banner Image media text: margins */
.wp-block-media-text .wp-block-media-text__content {
direction: ltr;
grid-column: 2;
grid-row: 1;
padding: 10% 8% 10%;
word-break: break-word;
}
.fwrap-package_id-10 { display: none !important; }
.uwp-profile-header .card-img-top {display:none}
.card-img-overlay {display:none}
.uwp-profile-header {margin-top: 100px}

Are you able to provide a list of new classes etc and advise what else I need to do to ensure the update for a child theme goes smoothly?

Thanks in advance!