title: arrange divs equal spaced
body: <p>I am working on FCC Challenge
  [Build Personal Portfolio][1]</p>
  
  <p>I am getting the different projects all in same row, I wanted it to arranged as per the screen width being responsive.
  I have used flex-direction : column for arranging divs within it vertically centered.
  then within the detail class have used flex with flex-direction:row and flex-wrap:wrap , justify-content:space-around . This part is not working as expected.</p>
  
  <pre><code> #projects, #contacts{
      height:90vh;
      display:flex;
      flex-wrap:wrap;
      flex-direction:column;
      justify-content:center;
      align-content:space-evenly;
    }
  
  .details{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:space-around;
   }
  </code></pre>
  
  <p>My work :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin:0;
    padding:0;
  }
  
  body{
    border:0;
    padding:0;
    min-height:100%;
    height:100%;
    font-family: 'Merriweather', serif;
  }
  
  
  h1, h2,h3{
   text-align:center;
   }
  
  nav{
    text-align:right;
    position:fixed;
    width:100%;
  }
  
  nav ul li{
    display:inline-block;
    margin:0 25px 20px;
    padding:10px;
    padding-top:20px;
    cursor:pointer;
  }
  nav ul li a{
    text-decoration:none;
    color:white;
  }
  
  nav ul li:hover{
    transform:scale(1.5);
    background-color:#36688D;
  }
  
  nav ul li a:hover{
      color:white;
  }
  
  #welcome-section{
    min-height:100vh;
    text-align:center;
    display:flex;
    justify-content:space-around;
    align-items:center;
    background-image: linear-gradient(to bottom, #a0a1b2, #b794b2, #d38591, #d4845c, #aa932b);
   }
  
  #welcome-section p{ 
    color:green;
    font-size:larger;
  }
  
  #welcome-section strong{
    color:#1671D6;
    font-size:larger;
  }
  
  #detail *{
    margin-top:4vh;
  }
  
  #myprofile{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
  }
  
  #myprofile span{
    margin: 0 6em;
    font-weight:700;
    font-size:17px;
    color:#FFD670;
  }
  
  #myprofile lable{
    font-weight:800;
    color:white;
  }
  
  #projects, #contacts{
    height:90vh;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:center;
    align-content:space-evenly;
  }
  
  #projects{
  background-image: linear-gradient(to bottom, #aa932b, #9a9b38, #8ba247, #7ba859, #6dad6c);
   }
  
  .details{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:space-around;
  }
  
  .section-title{
    padding: 10px 0;
    align-item:center;
    margin-bottom:20px;
    font-size:larger;
    color:#135394;
  }
  
  .project-tile{
   padding:1.5vh 2vw;
   flex: 0 1 29%;
  }
  
  .title{
    color:#fff;
    text-align:center;
    background-color:#a00606;
  }
  
  #contacts{
    background-image: linear-gradient(to bottom, #6dad6c, #42aa92, #3fa2ab, #6196af, #7e8ba3);
   }
  
  .contact-details {
    display: inline-block;
    font-weight: bold;
    margin: 0 35px 45px 35px;
    list-style-type: none;
    border: 2px solid #90C695;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #e0ebe8;
    color: green;
    text-align:center;
    text-decoration: none;
  }
  
  .contact-details:hover{
    background: #307860;
    color: #e0ebe8;
  }
  
  footer {
    padding: 20px;
    background: #AAAAAA;
    color: white;
    text-align:center;
    width:100%;
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
  }
  
  footer a {
    color: white;
  }
  
  @media only screen and (max-width: 500px) {
    nav ul {
      text-align: center;
    }
    nav ul li {
      margin: 20px;
    }
    #project {
      margin: 40px 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Personal Porfolio-Dev&lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Charmonman:700|Merriweather:300" rel="stylesheet"&gt;
    &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
    &lt;div id='navbar'&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href='#welcome-section'&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#projects'&gt;Work&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#contacts'&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div id='welcome-section'&gt;
    &lt;div id='detail'&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;h3&gt;My name is &lt;strong&gt;Devendra&lt;/strong&gt;,&lt;/h3&gt;
    &lt;p&gt;I am a web developer&lt;/p&gt;
   &lt;div id='myprofile'&gt;
     &lt;span&gt;&lt;lable&gt;Age:&lt;/lable&gt;30&lt;/span&gt;
     &lt;span&gt;&lt;lable&gt;Country:&lt;/lable&gt;India&lt;/span&gt;
     &lt;span&gt;&lt;lable&gt;Working at:&lt;/lable&gt;NMDC Ltd&lt;/span&gt;
   &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;div id='projects'&gt;
    &lt;div class='section-title'&gt;&lt;h2&gt;Some of my projects&lt;/h2&gt;&lt;/div&gt;
    &lt;div class='details'&gt;
    &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/XxJZYL' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='tribute page image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Tribute Page&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/BqZRaN' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Java Documentation&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/dgOgRv' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Product Landing image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Product Landing Page&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/BqzErY' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Plan Comparision image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Plan Comparision&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/XxKboz' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Survey image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Survey Form&lt;/p&gt;
    &lt;/div&gt;
     &lt;div class='project-tile'&gt;
      &lt;a href='https://codepen.io/devendra-singh/pen/rZgQKQ' &gt;&lt;img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Moon cresent image'&gt;&lt;/a&gt;
      &lt;p class='title'&gt;Moon Cresent&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;div id="contacts" &gt;
    &lt;div class="section-title"&gt;
      &lt;h2&gt;Connect with me below....&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class='details'&gt;
    &lt;a href="https://www.facebook.com/DevSingh616" target="_blank" class="contact-details"&gt;Facebook&lt;/a&gt;
    &lt;a href="https://github.com/Devendra616/" target="_blank"  id ='profile-link' class="contact-details"&gt;GitHub&lt;/a&gt;
    &lt;a href="https://twitter.com/DevNmdc" target="_blank" class="contact-details"&gt;Twitter&lt;/a&gt;
    &lt;a href="mailto:devendra.fe@gmail.com" class="contact-details"&gt;Send a mail&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;footer&gt;This is created as assignment of FCC
    &lt;p&gt;&amp;copy; Created for &lt;a href="https://www.freecodecamp.com/" target="_blank"&gt;FreeCodeCamp&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>