title: Why wouldn't display: flex; work?
body: <p>I am learning HTML/CSS at Udacity. I am trying to get the first row items <code>col-2</code> and <code>col-10</code> to fall in the same row next to each other but the <code>display: flex;</code> wouldn't work. Any pointers please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
   border: red solid 1px; !important
  }
  
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
  }
  
  *{
   text-align: center;
  }
  
  
  }
  .row {
   width : 100%;
   display: flex;
  }
  
  .col-1 {
   width: 8.33%;
  }
  
  .col-2 {
   width: 16.66%;
  }
  
  .col-3 {
   width: 25%;
  }
  
  .col-4 {
   width: 33.33%;
  }
  
  .col-5 {
   width: 41.66%;
  }
  
  .col-6 {
   width: 50%;
  }
  
  .col-7 {
   width: 58.33%;
  }
  
  .col-8 {
   width: 66.66%;
  }
  
  .col-9 {
   width: 75%;
  }
  
  .col-10 {
   width: 83.33%;
  }
  
  .col-11 {
   width: 91.66%;
  }
  
  .col-12 {
   width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;head&gt;
   &lt;title&gt;FRONT-END NINJA&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="FroEndNja.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="row"&gt;
   &lt;div class="col-2"&gt;Udacity Logo&lt;/div&gt;
   &lt;div class="col-10"&gt;JANE DOETTE&lt;br&gt;FRONT-END NINJA&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
   &lt;div class="col-12"&gt;IMAGE&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
   &lt;div class="col-12"&gt;FEATURED WORK&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
   &lt;div class="col-4"&gt;IMAGE1&lt;/div&gt;
   &lt;div class="col-4"&gt;IMAGE2&lt;/div&gt;
   &lt;div class="col-4"&gt;IMAGE3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
   &lt;div class="col-4"&gt;TEXT1&lt;/div&gt;
   &lt;div class="col-4"&gt;TEXT2&lt;/div&gt;
   &lt;div class="col-4"&gt;TEXT3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you,</p>
  
  <p>Abhilash</p>