Rahmen um die cols in einer row, auch bei Umbruch

<main id="startseite">
			<div class="container-fluid">
				<div class="row" id="dashboard-start-first">
					<div clas="col-6" id="fehlende-unterlagen">
						<div class="row grid-header">
							<div class="col">
								<span>Team/Disponent</span>
							</div>
							<div class="col">
								Jahresunt.
							</div>
							<div class="col">
								Vorsorge
							</div>
							<div class="col">
								APBP
							</div>
							<div class="col">
								Checkliste
							</div>
							<div class="col">
								HWK
							</div>
							<div class="col">
								ausl. AüV
							</div>
							<div class="col">
								fehl. AüV
							</div>
							<div class="col">
								&sum;
							</div>
						</div>
						<div class="row grid-row">
							<div class="col">
								<span>BF</span>
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
							<div class="col">
								0
							</div>
						</div>
					</div>
				  <div clas="col-2" id="auftragsstatus-kurz">
						<div class="row grid-header">
							<div class="col">
								Anwesenheit
							</div>
							<div class="col">
								Anzahl
							</div>
							<div class="col">
								Prozent
							</div>
						</div>
					</div>
					<div clas="col-2" id="geburtstag-intern">
						<div class="row grid-header">
							<div class="col">
								Mitarbeiter
							</div>
							<div class="col">
								am
							</div>
							<div class="col">
								wird
							</div>
						</div>
					</div>
					<div clas="col-2" id="wichtige-links">
						<div class="row grid-header">
							<div class="col">
								Link
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>

/* ==== GENERELLES === */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* ==== GLOBAL === */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Exo2', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 16px;
  background-color: #E4E8F1;
  color: #000000;
}


.grid-header {
  background-color: #9FA2A9;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
}


.grid-header > .col {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: #000000;
  border-width: 0px 1px 0px 0px;
}


.grid-header > .col:last-child {
  border-style: solid;
  border-color: #000000;
  border-width: 0px;
}


.grid-row {
  background-color: #ffffff;
  border-color: #000000;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
}


.grid-row > .col {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: #000000;
  border-width: 0px 1px 0px 0px;


}


.grid-row > .col:last-child {
  border-style: solid;
  border-color: #000000;
  border-width: 0px;
}


/*
Farben
Hintergrund: #E4E8F1;
Font-Color: #000000;
Blau: #004088;
Orange: #ef7900;
hellblau: #6E92BB
aktiv(orange): #fcbe00;
hintergrund tabellenüberschrift: #9FA2A9;
*/


/* === Navigationsleiste === */
.navbar {
  background-color: black;
}


.dropdown-menu {
  background-color: black;
}


a.dropdown-item {
  color: #ef7900;
}


.navbar-light .navbar-nav .nav-link {
    color: #ef7900;
}


.navbar-light .navbar-nav .nav-link:hover {
  color: white;
}


.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
    color: #ef7900;
}


.navbar-toggler {
  background-color: white;
}


.dropdown-submenu {
  position: relative;
}


.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}


.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}


/* === Dashboard für fehlende Unterlagen === */
#dashboard-start-first {
  margin: 2rem;
}


#fehlende-unterlagen {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}


#auftragsstatus-kurz {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}


#geburtstag-intern {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}


#wichtige-links {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

const spalte1AufGroesseBringen = function() {


  let spalte_1_header = document.querySelector('#fehlende-unterlagen > div.row.grid-header > div:nth-child(1) > span');
  let spalte_1_header_style = getComputedStyle(spalte_1_header);
  let spalte_1_header_width = spalte_1_header_style.width;
  let spalte_1_row = document.querySelector('#fehlende-unterlagen > div.row.grid-row > div:nth-child(1) > span');
  let spalte_1_row_style = getComputedStyle(spalte_1_row);
  let spalte_1_row_width = spalte_1_row_style.width;


  //Erhöung der Spaltenbreite1 um width1 - width2
  let spalte_1_row_width_adding = parseInt(spalte_1_header_width) + 6 - parseInt(spalte_1_row_width) + parseInt(spalte_1_row_width);




  spalte_1_row.setAttribute('style', 'width: ' + spalte_1_row_width_adding + 'px');
};




window.onLoad  = spalte1AufGroesseBringen();
window.addEventListener('resize', spalte1AufGroesseBringen());

<main id="startseite">
			<div class="container-fluid" id="dashboard-start-first">
				<div id="fehlende-unterlagen">
					<div>Team/Disponent</div>
					<div>Jahresunt.</div>
					<div>Vorsorge</div>
					<div>APBP</div>
					<div>Checkliste</div>
					<div>HWK</div>
					<div>ausl. AÜV</div>
					<div>fehl. AÜV</div>
					<div>&sum;</div>
					<div>BF</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>TEAM4</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>TEAM3</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>TEAM2</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>ST</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>WS</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>XX</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
					<div>0</div>
				</div>
				<div id="auftragsstatus-kurz">
					<div>Anwesenheit</div>
					<div>Anzahl</div>
					<div>Anteil</div>
					<div>Krank</div>
					<div>5</div>
					<div>3%</div>
					<div>Produktiv</div>
					<div>100</div>
					<div>97%</div>
					<div>Gesamt</div>
					<div>103</div>
					<div>100%</div>
				</div>
				<div id="geburtstag-intern">
					<div>Mitarbeiter</div>
					<div>am</div>
					<div>wird</div>
					<div>Max Mustermann</div>
					<div>29.03.</div>
					<div>33</div>
					<div>Marlene Musterfrau</div>
					<div>10.04.</div>
					<div>29</div>
				</div>
				<div id="wichtige-links">
					<div>Links</div>
					<div>Google</div>
					<div>Website</div>
					<div>Wetter</div>
					<div>YouTube</div>
				</div>
			</div>
		</main>

/* === Dashboard für fehlende Unterlagen === */
#dashboard-start-first {
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 2.5rem;
  width: 95%;
  row-gap: 0;
}


#fehlende-unterlagen {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(9, auto);
  width: 100%;
}


#auftragsstatus-kurz {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  row-gap: 0;
  width: 100%;
}


#geburtstag-intern {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 100%;
}


#wichtige-links {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(1, auto);
  width: 100%;
}