Custom CSS causes admonition heading to render with insufficient spacing

[lucasmelin]

When browsing a page with an admonition, the icon and header renders right up against the admonition content (note how there is no spacing between Tip and If:

Looking at the custom CSS that overrides the default Docusaurus styling, I noticed the following styles that affect this rendering.

canine-docs/src/css/custom.css

Lines 32 to 58 in baa5dac

	/* Alert Components */
	.alert {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-radius: 6px;
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.5;
	}
	.alert p {
	margin: 0;
	}
	.alert::before {
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 12px;
	flex-shrink: 0;
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 2px;
	}

Removing these classes entirely appears to fix the issue:

Reproduction steps

1. Navigate to a documentation page with an admonition. Examples:
   a. https://docs.canine.sh/docs/getting-started/optional-install-canine-locally
   b. https://docs.canine.sh/docs/getting-started/deploy-a-redis-database
   c. https://docs.canine.sh/docs/getting-started/configure-dns-lets-encrypt
2. Observe that there is insufficient space between the admonition header and the content.

I tested this in Safari, Chrome, Firefox and Zen browser on macOS, and saw the same results.

Expected results

There is sufficient spacing to distinguish the admonition header (Tip, Info, Warning, etc.) from the admonition content. See https://docusaurus.io/docs/markdown-features/admonitions for some examples.