Style Bootstrap nav to full width of screen

By

<div id="body-content" class="container-fluid px-0">
	<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
		<li class="nav-item" role="presentation">
			<button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content-tab-pane" type="button" role="tab" aria-controls="content-tab-pane" aria-selected="true">內容</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq-tab-pane" type="button" role="tab" aria-controls="faq-tab-pane" aria-selected="false">問與答</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="compare-tab" data-bs-toggle="tab" data-bs-target="#compare-tab-pane" type="button" role="tab" aria-controls="compare-tab-pane" aria-selected="false">比較</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="research-tab" data-bs-toggle="tab" data-bs-target="#research-tab-pane" type="button" role="tab" aria-controls="research-tab-pane" aria-selected="false">文獻</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="case-tab" data-bs-toggle="tab" data-bs-target="#case-tab-pane" type="button" role="tab" aria-controls="case-tab-pane" aria-selected="false">個案</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video-tab-pane" type="button" role="tab" aria-controls="video-tab-pane" aria-selected="false">影片</button>
		</li>
	</ul>

	<div class="tab-content" id="myTabContent">
		<div class="tab-pane fade show active" id="content-tab-pane" role="tabpanel" aria-labelledby="content-tab" tabindex="0">

		</div>
		<div class="tab-pane fade" id="faq-tab-pane" role="tabpanel" aria-labelledby="faq-tab" tabindex="0">

		</div>
		<div class="tab-pane fade" id="compare-tab-pane" role="tabpanel" aria-labelledby="compare-tab" tabindex="0">

		</div>
		<div class="tab-pane fade" id="research-tab-pane" role="tabpanel" aria-labelledby="research-tab" tabindex="0">

		</div>
		<div class="tab-pane fade" id="case-tab-pane" role="tabpanel" aria-labelledby="case-tab" tabindex="0">

		</div>
		<div class="tab-pane fade" id="video-tab-pane" role="tabpanel" aria-labelledby="video-tab" tabindex="0">

		</div>
	</div>
</div>
#body-content {
	width: 1024px;
	max-width: 100%;
	margin: 0 auto;
}

.nav-tabs .nav-link {
	padding: 0.5rem 0.5rem;
}

.nav-tabs .nav-link.active {
	border: 1px solid #2b324c;
	background-color: #de9a4f;
	color: #fff;
}

#myTab {
	border-bottom: 1px solid #2b324c;
}

Required libraries:

//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css

//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js