не получается выровнять блоки с картинкой и текстом в диве

[Gwynn]

Добрый день, я совсем совсем новичек, только первую неделю учу html и css, так что не судите строго)

Делаю верстку с макета, и столкнулся с проблемой.

вот картинка с проблемой. нужно чтобы блоки с товаром и картинкой стояли по 4 штуки в ширину.

 

HTML

<section id="content">
            <div class="good"><a href="#" class="goods"></a>
        <span class="apple">Apple MacBook Air MC969RS Uss Silver</span>
        <span class="apple1">Экран 11.6" (1366х768) HD LED, глянцевый /Intel Core i5 (1.6 ГГц) / RAM 4 ГБ / SSD 128 ГБ / Intel HD Graphics 3000 / без ОД / LAN / Wi-Fi / Blue-tooy\th 4.0 / веб-камера / Mac OS X Lion / 1.08кг</span>
        <span class="apple2"> $ 1 719</span>
        
        <div class="good"><a href="#" class="goods"></a>
        <span class="apple">Apple MacBook Air MC969RS Uss Silver</span>
        <span class="apple1">Экран 11.6" (1366х768) HD LED, глянцевый /Intel Core i5 (1.6 ГГц) / RAM 4 ГБ / SSD 128 ГБ / Intel HD Graphics 3000 / без ОД / LAN / Wi-Fi / Blue-tooy\th 4.0 / веб-камера / Mac OS X Lion / 1.08кг</span>
        <span class="apple2"> $ 1 719</span>

        <div class="good1"><a href="#" class="goods"></a>
        <span class="apple">Apple MacBook Air MC969RS Uss Silver</span>
        <span class="apple1">Экран 11.6" (1366х768) HD LED, глянцевый /Intel Core i5 (1.6 ГГц) / RAM 4 ГБ / SSD 128 ГБ / Intel HD Graphics 3000 / без ОД / LAN / Wi-Fi / Blue-tooy\th 4.0 / веб-камера / Mac OS X Lion / 1.08кг</span>
        <span class="apple2"> $ 1 719</span>

        <div class="good1"><a href="#" class="goods"></a>
        <span class="apple">Apple MacBook Air MC969RS Uss Silver</span>
        <span class="apple1">Экран 11.6" (1366х768) HD LED, глянцевый /Intel Core i5 (1.6 ГГц) / RAM 4 ГБ / SSD 128 ГБ / Intel HD Graphics 3000 / без ОД / LAN / Wi-Fi / Blue-tooy\th 4.0 / веб-камера / Mac OS X Lion / 1.08кг</span>
        <span class="apple2"> $ 1 719</span>

 

CSS

 

#content {
    float: left;
    height: auto;
    width: 685px;
    background: #fff;
    box-shadow: 1 1 1 #fff;
    margin-top: 50px;
    margin-left: 100px;
    border: solid 1px #000;
    box-sizing:border-box;
}
.good {
    float: left;
    height: auto;
    width: 145px;
    padding: 10px 0px 10px 20px;
    
}
.good1 {
    float: right;
    height: auto;
    width: 145px;
    padding: 10px 20px 10px 0px;
    
}
.goods {
    float: left;
    width: 145px;
    height: 85px;
    background: url("../images/goods.png") #000;

}
.apple{
    color: #5f702e;
    padding-left: 20px;
    font-size: 12px;
  float: left;
  box-sizing:border-box;
}
.apple1 {
    color: #666666;
    font-size: 8px;
    line-height: 14px;
    padding: 0px 5px 0px 5px;
    float: left;
    box-sizing:border-box;
}
.apple2 {
         
         color: #5f702e;
         font-size: 12px;
              box-sizing:border-box;
     }

Все было нормально, до какого то момента... голову уже всю сломал - что сделал не так =) может я что то с паддингом намудрил.. но голова уже не варит разобраться самостоятельно

Помогите разобраться пожалуйста

 

 

п.с id content это секция с товарами как раз, выделенная бордером

 

Я не совсем понимаю такие свойства как position и display. Возможно дело в этом?

Edited December 6, 2015 by Gwynn

[Q4Dizzy]

http://jsfiddle.net/yq8e152r/1/ на скорую руку... 

 

Если вы не совсем понимаете, значит читайте, учите и старайтесь понять... По крайней мере от себя скажу - темы - позиционирование (position), обтекания (float), очистка (clear), псевдоэлементы (after, before и т.д.), тип элемента (display), ну и ещё некоторые... Их знать и учить обязательно.. Даже по сути нет такой темы, которую можно было бы пропустить и особо не читать.. 

Edited December 6, 2015 by Q4Dizzy

[Gwynn]

Спасибо вам, буду разбираться.

Возможно кто нибудь найдет время найти именно в моем примере ошибки. Мне бы это очень помогло в понимании, заранее спасибо.

[Q4Dizzy]

Ну как минимум - неверная по логике структура.. У вас список должен быть..