Responsive Problems HabPanel

Hello, i have some style Problems with my HabPanel.

The second widget-Border is smaller than the widget itself. If i activate responsive view in Chrome ( F12 ) Both widgets are overlapped.

This is the code from the first widget:

<div class="section">
    <div class="bigDash">
    <div class="description">Wohnzimmer</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('WohnzimmerHeizungWand_1TEMPERATURE') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Küche</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('KuecheHeizung_4ACTUALTEMPERATURE') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Flur</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('FlurHeizung_4ACTUALTEMPERATURE') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Schlafzimmer</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Schlafzimmer_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Schlafzimmer_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('Schlafzimmer_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Arbeitszimmer</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Arbeitszimmer_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Arbeitszimmer_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('Arbeitszimmer_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Badezimmer</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Bad_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Bad_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('Bad_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Badezimmer Gast</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('BadGast_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('BadGast_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('BadGast_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
  
    <div class="bigDash">
    <div class="description">Badezimmer Keller</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Bad_Keller_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Bad_Keller_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('Bad_Keller_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
  
      <div class="bigDash">
    <div class="description">Draußen</div> 
    <div class="top">
			<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#temp"></use></svg></div>
			<div class="value">
				<div class="main">{{itemValue('Garten_Temperatur_Temperature') | number:1}}</div>
				<div class="sub">°C</div>
			</div>
		</div>
		<div class="bottom">
			<div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#luftfeuchte"></use></svg></div>
			<div class="value">Aktuelle Luftfeuchtigkeit: {{itemValue('Garten_Temperatur_Humidity') | number:1}} %</div>
      <div class="icon off"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#batterie"></use></svg></div>
			<div class="value">Batterie-Status: {{itemValue('Garten_Temperatur_BatteryLevel')}}%</div>
		</div>
	</div>
	</div>

This is the code from the second Widget

<div class="section">
	{{(itemsInGroup('gFensterStatus') | filter:{state:'!closed'}).length}} / {{(itemsInGroup('gFensterStatus')).length}} geöffnet
	<hr></hr>
		<div ng-repeat="item in itemsInGroup('gFensterStatus')">
			<div class="footerDash">	
      	<div class="top">
          <div ng-if="itemState(item.name)=='geöffnet'">
    				<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowopen"></use></svg></div>
					</div>
					<div ng-if="itemState(item.name)=='gekippt'">
    				<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowopen"></use></svg></div>
					</div>
					<div ng-if="itemState(item.name)=='geschlossen'">
    				<div class="footerIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#windowclosed"></use></svg></div>
					</div>
					{{item.label}} {{itemState(item.name)}}
				</div>
      </div>
    </div>
</div>

This is the CSS FIle

@charset "UTF-8";

.section .rzslider .rz-bar {
    background: #404040;
}
.dashboard-title {
    color: white;
    font-size: 35px;
    font-weight: 500;
}
.header {
  position: -webkit-sticky;
  position: sticky;
  -webkit-backdrop-filter: blur(10px);
  margin: 0px;
  width: 100%;
  /* padding: 8px; */
  z-index: 99;
  background: rgba(57, 57, 57, 0.5);
  border-bottom: 1px solid #262626;
  top: 0px;
}
.container {
	padding: 0px;
}
@media only screen {   
    .section {
    }
	.section .widget {
		width: 100%;
		float: left;
    min-height: 35px;
	}
	.footerDash{
		width: calc(100% - 6px);
	}
	.section .bigDash {
		margin-left: auto;
		width: calc(100% - 6px);
	    margin-right: auto;
	}  	
}
@media only screen and (min-width: 650px) { 
    .section {
    }
	.section .widget {
		width: 50%;
		float: left;
	}	
	.footerDash{
		width: calc(50% - 6px);
		min-width: 320px;
	}	
	.section .bigDash {
		margin-left: auto;
		width: calc(50% - 6px);
	  margin-right: auto;
      min-width: 320px;

	}  	
}
@media only screen and (min-width: 1000px) {
    .section {
    }
	.section .widget {
		width: 33%;
		float: left;
	}	
	.footerDash{
		width: calc(33% - 3px);
		min-width: 320px;
	}		
	.section .bigDash {
		margin-left: auto;
	    width: calc(33% - 3px);
	    min-width: 320px;
	    margin-right: auto;
	} 	
}
.section {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    /* margin-right: 20px; */
    /* float: left; */
    text-align: left;
    color: white;
    border-bottom: 1px solid #2a2a2a;
    /* padding: 3px; */
    padding-bottom: 6px;
}
.section .bigDash {
    float: left;
    padding-bottom: 15px;
    padding-top: 10px;
    background: #212124;
    /* margin-bottom: 3px; */
    border-radius: 10px;
    /* margin-right: 3px; */
    box-sizing: content-box;
    /* margin-left: 3px; */
    margin: 3px;
}
.footerDash{
		margin-left: auto;
		margin-right: auto;
		height: 10px;
		margin-right: auto;
		float: left;
		padding-bottom: 15px;
		padding-top: 10px;
		background: #212124;
		border-radius: 10px;
		box-sizing: content-box;
		margin: 3px;
}
.footerIcon{
	width: 20px;
    height: 20px;
    margin-left: 5px;
	margin-right: 5px;
    float: left;
}
.section .bigDash .description {
    font-size: 18px;
    padding-left: 15px;
    font-weight: 500;
}
.section .bigDash .top {
    clear: left;
    margin-left: auto;
    width: 205px;
    margin-right: auto;
    height: 74px;
}
.section .bigDash .top .icon {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-left: 15px;
  float: left;
}
.section .bigDash .top {
    float: left;
    /* margin-left: auto; */
    /* width: 330px; */
    /* margin-right: auto; */
    height: 74px;
}
.section .bigDash .top .value {
    width: 208px;
    /* border: 1px solid green; */
    height: 80px;
}
.section .bigDash .bottom {
    float: left;
    margin-left: 21px;
    /* margin-right: auto; */
    /* height: 35px; */
    width: calc(100% - 240px);
    /* border: 1px solid; */
    padding-top: 3px;
}
.section .bigDash .bottom .value {
  padding-top: 5px;
  padding-left: 5px;
  /* padding-right: 25px; */
  /* float: left; */
  color: white;
  /* clear: right; */
  height: 33px;
}
.section .bigDash .bottom .icon {
    width: 30px;
    height: 30px;
    padding-top: 0px;
    float: left;
}
.section .bigDash .main {
  font-size: 65px;
  letter-spacing: 0px;
  line-height: 70px;
  float: left;
  color: white;
  width: 75px;
  text-align: right;
  font-weight: 500;
}
.section .bigDash .sub {
  font-size: 15px;
  color: #575f59;
  /* display: inline; */
  text-align: left;
  margin-left: -14px;
  font-weight: 500;
  /* width: 20px; */
  float: left;
}

Maybe someone have time and be able to help me :slight_smile: