My CSS/Layout gets messy when I zoom in or zoom out of the page

I recently created a website that uses multiple divs. However, when I zoom in and out, some divs shift to the left corner while others move to the right corner of the screen. Below is the code for my website—any help would be greatly appreciated! I want them to stay the same even if the screen resolution is different, I noticed that It changes if I zoom in or change the page t o a bigger screen

<div class="profile-header">
<!-- USER INFO -->

<div class="tab-panel-content-header justify-content-between">{{displayValue(printPatron.fullName)}}

<div class="section-container-header left-side">

<div class="flex align-items-center gap-2">
<div class="tier-container flex align-items-center badge-container">
<div class="tier-color" [style.background-color]="printPatron.tierColor"></div>
<div class="badge-user-id">{{ printPatron.number }}</div>
</div>
<span class="status-badge active" *ngIf="printPatron.creditStatusDescription === 'Active'">Active</span>
<span class="status-badge inactive" *ngIf="printPatron.creditStatusDescription !== 'Active'">ID Expired</span>
</div>
<div *ngIf="printPatron.preferred" class="preferred-indicator">
<img src="assets/images/preferred-indicator-star.svg">
Preferred
</div>
</div>
</div>
<!-- VERTICAL DIVIDER -->
<div class="divider-container">
<div class="vertical-divider-name"></div>
</div>


<!-- CREDIT PROFILE (LEFT SIDE) -->
<div class="tab-panel-content-header-credit justify-content-between">
<div class="credit-profile-title">Credit Profile</div>
</div>
<div class="credit-summary">
<div class="credit-box"><span class="credit-title">Total Credit:</span>
<strong>{{ printPatron.totalAvailable | currency:'USD':'symbol-narrow':'1.2-2' }}</strong>
</div>
</div>

<!-- PROGRESS BAR -->
<!-- <div class="credit-progress">
<p-progressBar [value]="currentCreditPercentage" [style]="{ height: '20px' }" [showValue]="true"></p-progressBar>
<span class="progress-label">{{ currentCreditPercentage }}%</span>
</div> -->

<!-- CREDIT LIMIT BELOW PROGRESS BAR -->
<div class="credit-limit-text">
Credit Limit: <strong>{{ printPatron.creditLimit | currency:'USD':'symbol-narrow':'1.2-2' }}</strong>
</div>


<!-- VERTICAL DIVIDER AFTER CREDIT PROFILE -->
<div class="divider-container">
<div class="vertical-divider-credit"></div>
</div>

<div class="financial-details">
<div class="financial-grid">
<!-- LEFT COLUMN (TTO & Deposited) -->
<div class="column">
<div class="info-row">
<label class="financial-label">TTO</label>
<span class="financial-value">{{ printPatron.ttoLimit | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
<div class="info-row">
<label class="financial-label">Deposited</label>
<span class="financial-value">{{ printPatron.totalAvailable | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>

</div>

<!-- VERTICAL DIVIDER -->
<div class="vertical-divider"></div>

<!-- RIGHT COLUMN (Front Money & Returns) -->
<div class="column">
<div class="info-row">
<label class="financial-label">Front Money</label>
<span class="financial-value">{{ printPatron.frontMoney | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
<div class="info-row negative">
<label class="financial-label">Returns</label>
<span class="financial-value">{{ printPatron.returned | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
</div>
</div>

<!-- HORIZONTAL DIVIDER -->
<hr class="section-divider">

<!-- HIGH ACTION & LAST ACTION DETAILS -->
<!-- HIGH ACTION & LAST ACTION DETAILS -->
<div class="action-details">
<div class="info-row">
<label class="action-label">High Action:</label>
<span *ngIf="hasHighMarkerAmount">{{ highMarkerAmount | currency:'USD' }} ({{ highMarkerDate | date: 'MM/dd/yyyy' }})</span>
<span *ngIf="!hasHighMarkerAmount">-</span> </div>
<div class="info-row">
<label class="action-label">Last Action:</label>
<span class="action-value">
{{ printPatron.lastActionAmount| currency:'USD':'symbol-narrow':'1.2-2' }}
({{ printPatron.lastActionDate | date:'MM/dd/yyyy' }})
</span> </div>
</div>
</div>

<div class="vertical-divider"></div>


<div class="column-outstanding">
<div class="info-row">
<label class="financial-label">Outstanding</label>
<span class="financial-value">{{ printPatron.creditOutstandingBalance | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
<div class="info-row negative">
<label class="financial-label">Write-Offs</label>
<span class="financial-value">{{ printPatron.writtenOff | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
<div class="info-row">
<label class="financial-label">Available</label>
<span class="financial-value">{{ printPatron.creditAvailable | currency:'USD':'symbol-narrow':'1.2-2' }}</span>
</div>
</div>



CSS: css

Continue reading...