блочные элементы не выравниваются,

dabblet.css

.wrapper
{
	padding-left: 4em;	
	text-align: right;
}

.wrapper p
{	
/* 
	блочные элементы не выравниваются,
	но наследую выравнивание для своих строк и
	строчных элементов внутри
*/
	/*display: inline-block;*/
	width: 60%;
}

.grid
{
            text-align: justify;
}

.grid div
{
	display: inline-block;
		
	width: 200px;
	padding: 10px;
	margin: 20px 20px 0 0;
	
	background: #f;

	text-align: justify;
	vertical-align: top;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.4);
}


/* 
	нужно для того, 
	чтобы последняя 
	строка тоже растягивалась 
*/
.grid:after
{
	display: inline-block;
	width: 100%;

	content: "";
}


/* еще техника, не заввисит от той, что описана выше */

div.p
{
/*
	уберите display:none

	мы добиваем содержимое
	.grid невидимыми блоками
	по ширине равными основным
	таким образом формируя сетку
	выравнивания.
*/

	display: none;
	padding: 0 10px;		
}

dabblet.html

<div class="wrapper">
	<h1 class="start-quote">«Мелодический громкостнoй прогрессийный период — актуальная национальная задача»</h1>
	<p class="start-quote">
		«Интервально-прогрессийная континуальная», так или иначе, вызывает мелодический звукосниматель, в таких условиях можно спокойно выпускать пластинки раз в три года.
	</p>
	<p>
		Как было показано выше, контрапункт контрастных фактур выстраивает звукорядный райдер
	</p>	
</div>

<div class="grid">
	<div>long long line 1<br>long long line 1</div>
	<div>long line 2</div>
	<div>long line 3</div>
	<div>long line 4</div>
	<div>long line 5</div>
	<div>long line 6</div>
	<div>long line 7</div>
	<div>long line 8</div>
	<div>long line 9</div>
	<div>long line 10</div>
	<div>long line 11</div>
	<div>long line 12</div>	
	
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
	<div class="p"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}