Extra Spacing in Table

The extra space is caused by this rule:

table {
   border-collapse: separate;
   border-spacing: 0;
   border-width: 1px 0 0 1px;
   margin: 0 0 1.75em;
}

It’s a generic rule that adds space at the bottom of each table. If you wish to eliminate the space at the bottom of that table, I would suggest adding a class or ID to that table so that your new rule only affects that table and not any others. For example, if you add an ID of logo to the table like this:
<table id="logo">
Then you can add a CSS rule in your child theme’s style.css file like this:

#logo {
   margin-bottom: 0;
}

So, one thing you might want consider, most sites nowadays don’t use tables for web design. The reason is that tables do not act in a responsive manner. You’ve probably noticed that most sites today are legible on a wide range of screen widths, from desktops to tablets to mobile phones. Instead of showing a completely different site for mobile devices, sites are now designed using a technique called responsive design. If you visit a responsive site on your desktop, then make your browser narrow, you can see how the site changes and rearranges itself based on the width of the screen. Images will grow and shrink depending upon the screen width. The sidebar might collapse under the main content, and everything is visible on the screen without having to scroll left & right, or having to zoom in.

Tables prevent that responsive behavior, because cells can’t rearrange themselves. Instead of using tables, you should think about using <div> elements, and learn how to float those elements using CSS, and how to use media queries to rearrange the content based on screen widths. Just Google responsive web design.

If you aren’t concerned about how your site looks on a mobile device, i.e., you just want a fixed width site, then you can continue to use tables, but just know that your site won’t have that professional look to it, and Google may mark your site down in search rankings if it’s not mobile friendly.