How do I remove the gap between the announcement bar and header on Squarespace?

Squarespace 7.1 sometimes adds a gap between the announcement bar and the header due to margin or padding on the .header container or the announcement bar wrapper. This is a common complaint.

Target both elements and collapse the spacing. The announcement bar uses .header-announcement-bar-wrapper and the header itself is .header. Remove any bottom margin on the bar and top margin on the header.

.header-announcement-bar-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.header-announcement-bar-wrapper + .header {
  border-top: none;
}