Style / Width looks weird

I’m trying to setup Select2 for the first time following the examples on this page, but the result is not going as expected, it looks really weird and glitchy:
image

HTML:

<head>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
	<script src="main.js"></script>
</head>

<body>
	<select class="option1"></select>
</body>

main.js:

var options1  = [
    {id: 0, text: "text1"},
    {id: 1, text: "text2"}
]

$(document).ready(function() {
	$(".option1").select2({
		data: options1,
		placeholder: "Option 1",
		allowClear: true
	});
});

any idea what might be going on?