title: Centering Cards with Bulma CSS
body: <p>I'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.</p>
  
  <p><a href="https://i.stack.imgur.com/ZTw3z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZTw3z.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.</p>
  
  <pre><code> &lt;div class="section"&gt;
       &lt;div class="task-container is-center"&gt;
           &lt;div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id"&gt;
               &lt;input type="checkbox" class="checkbox"&gt;
               &lt;span class="has-text-left"&gt;
                       {{task.desc}}
               &lt;/span&gt;
               &lt;span class="icon is-pulled-right has-text-danger"&gt;&lt;i class="far fa-times-circle"&gt;&lt;/i&gt;&lt;/span&gt;
               &lt;span class="icon is-pulled-right has-text-primary"&gt;&lt;i class="far fa-play-circle"&gt;&lt;/i&gt;&lt;/span&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Any help, tips, suggestions, etc. Would be greatly appreciated!.</p>