html - How to make space between two column items? -

i want display list of items in 2 columns. there less space between 2 column items. want more space between. should change? tried add more pixel padding. didn't work.

#category{    background: #062134;    color: white;    display: table;    width:100%;    font-size: 20px;    -webkit-box-align: center;    -webkit-box-pack: center;      -moz-box-align: center;    -moz-box-pack: center;      display: -webkit-box;    display: -moz-box;  }    #category .column-title {    margin-bottom: 30px;    font-weight: bold;  }    #category > div {    display: table-row;  }    #category > div > div {    display: table-cell;    padding-top: 50px;    padding-bottom: 50px;    padding-right: 50px;     padding-left: 50px;    }    #category > div > div:first-child {    padding-left: 5%;    padding-right: 1%;    }      #category .column-title {    margin-bottom: 30px;    font-weight: bold;  }    #category > div {    display: table-row;  }    #category > div > div {    display: table-cell;    padding-top: 50px;    padding-bottom: 50px;    }    #category > div > div:first-child {    padding-left: 5%;    padding-right: 1%;  }    #category > div > div:nth-child(2) {    padding-left: 1%;    padding-right: 1%;  }    #category > div > div:nth-child(3) {    padding-left: 1%;    padding-right: 30%;  }    #category p {      line-height: 300%;  }  #category input {    display: block;    float: left;    background: #062134;    /*border: 2px solid white;*/    border-top: 2px solid white;    border-right: 0;    border-bottom: 2px solid white;    border-left: 2px solid white;    border-top-left-radius: 5px;    border-bottom-left-radius: 5px;    /*padding: 10px;*/     color: white;    height: 36px;    text-indent: 10px;  }  #category button {    float: left;    background: #062134 10px 10px no-repeat;    height: 40px;    width: 70px;    height: 40px;    border-top: 2px solid white;    border-right: 2px solid white;    border-bottom: 2px solid white;    border-left: 0;    border-left: 0;    border-top-right-radius: 5px;    border-bottom-right-radius: 5px;    margin-bottom: 30px;  }    /*.row-2 p {      clear: left;  }*/  #category input:focus {    outline: 0;    background: #4d7ec9;  }    #category input:hover {    box-shadow: 0 0 0.5em white;  }    #category button:hover {    background-color: blue;  }    #category button:focus {    outline: 0;  }    .list-of-resources {    display: table;  }    .list-of-resources > div {    display: table-row;  }    .list-of-resources > div > div {    display: table-cell;    padding: 5px 0;  }    .list-of-resources > div > div:last-child {    padding: 0 0 0 100px;  }    .list-of-resources {    text-decoration: none;    color: white;  }    .list-of-resources a:hover {    color: tomato;  }  @media screen , (max-width: 900px) {    #category > div > div {      display: table-cell;      width: 28%;      padding-top: 50px;    }      #category > div > div:first-child {      padding-left: 5%;      padding-right: 1%;    }      #category > div > div:nth-child(2) {      padding-left: 1%;      padding-right: 1%;    }      #category > div > div:nth-child(3) {      padding-left: 1%;      padding-right: 5%;    }  }      @media screen , (max-width: 600px) {        #category > div > div {      width: 90%;        -webkit-flex: 1 6 20%;             flex: 1 6 20%;     -webkit-order: 3;             order: 3;    }      #category > div > div:nth-child(2) {      clear: both;      padding-left: 5%;      padding-top: 10px;    }  }

<div id="category">          <div>              <div class="column">                  <div class="column-title">explore</div>                      <div class="column-content list-of-resources">                      <div>                          <div><a href="#">envato</a></div>                          <div><a href="#">themeforest</a></div>                      </div>                      <div>                          <div><a href="#">themecurve</a></div>                          <div><a href="#">microsoft</a></div>                      </div>                      <div>                          <div><a href="#">kreativeshowcase</a></div>                          <div><a href="#">google</a></div>                      </div>                      <div>                          <div><a href="#">freebiescurve</a></div>                          <div><a href="#">yahoo</a></div>                      </div>                  </div>              </div>          </div>  </div>

your code working...but when put mobile view,i wanted lists go down..but in mobile view lists in same place.

you can use code

css

#category{   background: #062134;   color: white;   display: table;   width:100%;   font-size: 20px;   -webkit-box-align: center;   -webkit-box-pack: center;    -moz-box-align: center;   -moz-box-pack: center;    display: -webkit-box;   display: -moz-box; }  #category .column-title {   margin-bottom: 30px;   font-weight: bold; }  #category > div {   display: table-row; }  #category > div > div {   display: table-cell;   padding-top: 50px;   padding-bottom: 50px;   padding-right: 50px;    padding-left: 50px;  }  #category > div > div:first-child {   padding-left: 5%;   padding-right: 1%;  }   #category .column-title {   margin-bottom: 30px;   font-weight: bold; }  #category > div {   display: table-row; }  #category > div > div {   display: table-cell;   padding-top: 50px;   padding-bottom: 50px;  }  #category > div > div:first-child {   padding-left: 5%;   padding-right: 1%; }  #category > div > div:nth-child(2) {   padding-left: 1%;   padding-right: 1%; }  #category > div > div:nth-child(3) {   padding-left: 1%;   padding-right: 30%; }  #category p {     line-height: 300%; } #category input {   display: block;   float: left;   background: #062134;   /*border: 2px solid white;*/   border-top: 2px solid white;   border-right: 0;   border-bottom: 2px solid white;   border-left: 2px solid white;   border-top-left-radius: 5px;   border-bottom-left-radius: 5px;   /*padding: 10px;*/    color: white;   height: 36px;   text-indent: 10px; } #category button {   float: left;   background: #062134 10px 10px no-repeat;   height: 40px;   width: 70px;   height: 40px;   border-top: 2px solid white;   border-right: 2px solid white;   border-bottom: 2px solid white;   border-left: 0;   border-left: 0;   border-top-right-radius: 5px;   border-bottom-right-radius: 5px;   margin-bottom: 30px; }  /*.row-2 p {     clear: left; }*/ #category input:focus {   outline: 0;   background: #4d7ec9; }  #category input:hover {   box-shadow: 0 0 0.5em white; }  #category button:hover {   background-color: blue; }  #category button:focus {   outline: 0; }  .list-of-resources {     width: 800px; }  .list-of-resources #left {     float: left;     width: 400px; }  .list-of-resources #right {     float: right;     width: 400px; }  .list-of-resources {   text-decoration: none;   color: white; }  .list-of-resources a:hover {   color: tomato; } @media screen , (max-width: 900px) {     .list-of-resources {         width: 100%;     }      .list-of-resources #left     {         float: left;         width: 100%;     }      .list-of-resources #right     {         float: left;         width: 100%;     }  }   @media screen , (max-width: 600px) {     #category > div > div {     width: 90%;      -webkit-flex: 1 6 20%;            flex: 1 6 20%;    -webkit-order: 3;            order: 3;   }    #category > div > div:nth-child(2) {     clear: both;     padding-left: 5%;     padding-top: 10px;   } } 

html

<div id="category">         <div>              <div class="column">                 <div class="column-title">explore</div>                 <div class="column-content list-of-resources">                  <div id="left">                     <div><a href="#">envato</a></div>                     <div><a href="#">themecurve</a></div>                     <div><a href="#">kreativeshowcase</a></div>                     <div><a href="#">freebiescurve</a></div>                 </div>                 <div id="right">                     <div><a href="#">themeforest</a></div>                     <div><a href="#">microsoft</a></div>                     <div><a href="#">google</a></div>                     <div><a href="#">yahoo</a></div>                 </div>             </div>         </div> </div> 

pic