Ошибка ширины CSS на отзывчивом

Question

Это моя скрипка: http://jsfiddle.net/o7pfjv3w/. Я пытаюсь дать сетке класс a margin-left:10px и margin-right:10px;, но появляется полоса прокрутки. Как я могу избавиться от него?

код CSS:

.main{width: 100%;border:1px solid black;overflow:auto;display:block;} 
.grid{width:100%; margin-left:10px;margin-right:10px} 

HTML код:

<div> 
    <div class="main"> 
     <div class="grid">   <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p> 
     </div> 
    </div> 
</div> 

Answer 1

Это как margin и width: 100%.

.grid{width:100%; margin-left:10px;margin-right:10px;} 

Вам нужно убедиться, что вы его вычислите. Таким образом, вместо этого, дать padding и сделать box-sizing быть border-box:

.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;} 

Fiddle: http://jsfiddle.net/o7pfjv3w/1/

Answer 2

Просто измените ваш overflow:auto; на overflow:hidden;

.main{ 
    width: 100%; 
    border:1px solid black; 
    overflow:hidden; // not auto 
    display:block; 
} 

Вот обновленный jsfiddle