I have the a problem when trying too render ionic content in my website , you can check the problem here to inspect my element and css :
https://elitestudents.link/html/
here is my html code
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</head>
<body>
<ion-app >
<ion-content>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">اسم الطالب</ion-label>
<ion-input placeholder="الاسم بالعربي" style="text-align:center ;"></ion-input>
</ion-item >
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">هاتف لي الامر</ion-label>
<ion-input type="number" placeholder="07****" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">معرف التلكرام الخاص بالطالب</ion-label>
<ion-input placeholder="لا تنسة ال @ بالداية" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">كود الدورة</ion-label>
<ion-input placeholder="" style="text-align:center ;"></ion-input>
</ion-item>
<ion-button style="--background: orange; border-radius: 50px ; text-align:center ;" > الانضمام للدورة
<ion-icon slot="start" name="school"></ion-icon>
</ion-button>
</ion-content>
</ion-app>
</body>