What could cause this misalignment, and how can I fix it to ensure the headers align perfectly with the rows in the table? [closed]

I'm building a React application with styled-components, and I'm having trouble aligning my MarketHeader and TableContent components. They are both children of a parent container and use flexbox for layout, but the content in the header doesn't align with the rows in the table.

I created a codesandbox with the snippets relevant of the code: https://codesandbox.io/p/sandbox/market-component-dwcfxm

If someone can take a quick look and help me with some CSS with the alignment of the values with the header labels (currency, bid, ask, etc.,)