Я делаю проект в материале angular6.Я создал страницу входа, используя материал angular6, но не могу разместить эту форму входа справа от страницы.
Я пытался использовать поля сверху, поля снизу, поля слева и справа, но ни один из них не работает.
Любая помощь, пожалуйста ..
Вот мой кодapp.component.html
<body>
<div class="container">
<mat-card class="example-card">
<mat-grid-list cols="1" rowHeight=5:1>
<mat-grid-tile>
<mat-card class="login">Login</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<input matInput placeholder="name">
<span matSuffix><mat-icon>account_circle</mat-icon></span>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<input matInput placeholder="password">
<span matSuffix><mat-icon>visibility</mat-icon></span>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="accent">Submit</button>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
</div>
</body>
app.component.css
html, body {
height: 100%;
background-image: url("/assets/pencil4.jpg");
background-position: center;
background-size: cover;
/* background-attachment: fixed; */
}
*/
mat-card{
display: flex;
height:41% ;
background-color: gray;
}
.login{
width:90%;
height:30% ;
background-color: #FFDE03;
font-weight: 800;
border-radius: 5px;
}
mat-form-field{
width:90%;
}
mat-grid-tile{
width:400px;
}
.example-card {
max-width: 300px;
}
Если magin-top:800px, 
ЕслиЯ использую padding-top: 300px;