hop

frontend/src/components/Movie.vue

 <template>
   <div class="child">
     <img
-      height="400"
+      class="movieImage"
       :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
     />
     <h2>{{ movie.title }}</h2>
@@ -18,6 +18,9 @@ export default {
 </script>
 
 <style scoped>
+.movieImage {
+  width: 50%;
+}
 .child {
   margin-left: auto;
   margin-right: auto;

frontend/src/views/Home.vue

@@ -16,9 +16,12 @@
     </p>
     <div>Nom du film: {{ movieName }}</div> -->
     <div class="parent">
-      <tr v-for="movie in movies" :key="movie.id">
-        <Movie class="child" :movie="movie" />
-      </tr>
+      <Movie
+        class="child"
+        :movie="movie"
+        v-for="movie in movies"
+        :key="movie.id"
+      />
     </div>
   </div>
 </template>
@@ -86,15 +89,13 @@ export default {
 
 .parent {
   display: flex;
-  flex-flow: column wrap;
-  height: 250px;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-evenly;
 }
 
 .child {
-  width: 40%;
-  height: 40%;
-  margin-left: auto;
-  margin-right: auto;
+  width: 20%;
 }
 
 h3 {