How to put six divs in two rows

Question

My problem is when I put 6 divs with texts and images in 2 rows it should look like this. http://2.firepic.org/2/images/2015-08/17/wv2fu4foh87c.png

but when I add

@media screen and (min-width:1000px){
    .container {
    width: 940px;
    margin: 0 auto;
    overflow:hidden;}
}

and try to resize my window this is what is happening

http://2.firepic.org/2/images/2015-08/17/u06pnsn3elx3.png

Here is my code

     <div class="container">
        <div class="work-wrap ">
            <div class="work-item icon1">
                <h5 class="title">Select a piece of jewelry that you like.</h5>
                <p>You can choose your size, decoration material (silver, gold)</p>

            </div>
            <div class="work-item icon2">
                <h5 class="title">Make decoration unique.</h5>
                <p>You can write a variety of phrases, change shape, and even adjust the polishing.</p>

            </div>
            <div class="work-item icon3">
                <h5 class="title">Payment methods chosen decorations.</h5>
                <p>You can use a credit card, and other convenient for you.</p>

            </div>

            <div class="work-item icon4">
                <h5 class="title">Above decoration will be ready within 3-7 days.</h5>
                <p>On this site you can choose the most convenient way for delivery.</p>

            </div>
            <div class="work-item icon5" >
                <h5 class="title">You have successfully passed all the menu items.</h5>
                <p>We beautifully pack and deliver your decoration in our signature box.</p>

            </div>
            <div class="work-item icon6">
                <h5 class="title">Wear purchased item with pleasure.</h5>
                <p>As credit cards, and other convenient for you.</p>

            </div>
            </div>
      </div>

and CSS

.work-wrap {
    overflow: hidden;
    display: inline-block;
    margin-bottom: 220px;
}

h5.title {
    margin-bottom: 20px;
    text-align: left;
    font: 18px/18px robotobold;
    color: #464646;
    width: 100%;
}

.work-item {
    float: left;
    width: 33.33%;
    padding: 90px 8px;

}

.icon1 {
    background: url('D:/htmlCss/jewelery/img/icon1.png') no-repeat left top;    
}

.icon2 {
    background: url('D:/htmlCss/jewelery/img/icon2.png') no-repeat left top;
}
.icon3 {
    background: url('D:/htmlCss/jewelery/img/icon3.png') no-repeat left top;
}
.icon4 {
    background: url('D:/htmlCss/jewelery/img/icon4.png') no-repeat left top;
}
.icon5 {
    background: url('D:/htmlCss/jewelery/img/icon5.png') no-repeat left top;
}
.icon6 {
    background: url('D:/htmlCss/jewelery/img/icon6.png') no-repeat left top;
}

How can I fix it?

Answer 1

So the problem is some math calculations...

you have width 33.33% in work-item, that out of width:940px in container is 314px + the padding: 90px 8px so its adds 16px goes up to 330px an that times 3 makes 990px so the three elements with is bigger than the container itself. that's why you get that extra line.

Suggestion;

Do your Maths again: 100%/3 = 33.33% BUT YOU NEED A PADDING so three items need 2 gutter between them, that let you with

.work-item{
  float: left;
  width: 31.33%;
  padding: 90px 8px;
}

Answer 2

Matias is right but if you want, try Bootstrap's grid system.

Two rows with three columns in each row and you're ready to go.

EDIT:

<div class="container">
    <div class="row">
        <div class="col-md-4">column 1</div>
        <div class="col-md-4">column 2</div>
        <div class="col-md-4">column 3</div>
    </div>

    <div class="row">
        <div class="col-md-4">column 4</div>
        <div class="col-md-4">column 5</div>
        <div class="col-md-4">column 6</div>
    </div>
</div>

Answer 3

just use

.work-item {
   width: 31%;
   padding: 90px 8px 6px 2px;
   display: inline-block;
   vertical-align: top;
   background-size: 85px 85px !important;
   background-position: center top;

}

Here is a fiddle and it's result

Answer 4

This is flexbox, it saves me a lot of hassle in regards to positioning and the re-sizing of my divs. I've cut down on a lot of @media queries as a result:

.work-wrap{
display: -webkit-flex;
position: relative;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
}

.work-item{
width: 33%;
height: 33%;
}

Answer 5

Using your width and padding, the third column drops down, since you have to account for margin and padding of the body or other outside tags.

.work-wrap {
    overflow: hidden;
    display: inline-block;
    margin-bottom: 220px;
    text-align: center;
}

.work-item {
    display: inline-block;
    width: 32%;
    padding: 90px 8px;
    text-align: left;
}

Answer 6

Try using this rules

.work-item {
        /*float: left;*/
        width: 33.33%;
        padding: 90px 8px;
        display: inline-block;
        vertical-align: top;
    }