Aligner menu avec un tableau de données

Bonjour,

j'ai encore un problème au niveau de mon fond d'écran j'ai mon fond d'écran couleur gris et en dessous de mon tableau de donnée un fond blanc par dessus et décaler, j'ai du faire une mauvaise manipulation mes je ne sais pas trop.

J'aurais voulu faire avec Bulma un menu sur la gauche aligner avec mon tableau de donnée, avez vous une idée ?

voici mon code source component.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma plateforme crypto</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
  </head>
 
<body>
 
  <!--affichage des monnaies-->
 
      <h2 class="title is-4">Bienvenue sur ma page</h2>
    <div *ngIf="cryptos">
    <div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
 
    <span class="tag is-primary left">{{ crypto }}</span>
    <span class="tag is-warning right">{{ cryptos[crypto].EUR | currency:'EUR':true}}</span>
 
  </div>
</div>
<br>
</body>
</html>

mon fichier component.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
div#crypto-container {
    background:white;
    width: 50%;
    margin: 0 auto 4px auto;
    padding: 1em;
    box-shadow: 1px 1px 0 lightgrey
  }
 
  span.left {
    font-weight: bold;
  }
 
  span.right {
    float:right;
  }

mon fichier style.css :

Code:

1
2
3
4
5
body {
    background: #f1f1f1;
    padding:50px;
    font-family: 'Arial';
}