WooCommerce and Bootstrap conflict

The solution suggested on this page to resolve the conflict between WooCommerce styles and bootstrap 4 partially worked when using bootstrap 4. Adding the below block to custom CSS fixed the checkout page issue:

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce form .form-row {
  display: block;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  max-width: unset;
}

I also added the below styles to fix the address broken styles when I visit: https://example.com/my-account/edit-address/:

.woocommerce-Addresses {
    display: block !important;
}

.woocommerce-Address-title > * {
    display: block !important;
}

One conflict that remains unresolved with the above configuration is the broken page of my account on the below URL when the user is not signed in:
https://example.com/my-account/

I have two questions:
1. How can I get the styles of https://example.com/my-account/ page corrected when using bootstrap 4?
2. This solution does not fully work with bootstrap 5.1.3. Using bootstrap 5.1.3 with the above custom styles applied produces a broken checkout page but it gives correct styles to:
https://example.com/my-account/edit-address/
https://example.com/my-account/ –> Was corrected by using bootstrap 5.1.3 without any custom CSS.
The question: How can I correct the checkout page styles when using bootstrap 5.1.3?