Question: I simply want to use a modified example of Nested flex on the [PrimeNG Flex](https://www.primefaces.org/primeng/#/flexgrid) by using the code below:

```
<h3>Nested</h3>
<div class="p-grid nested-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-12">
                <div class="box">12</div>
            </div>
        </div>
    </div>
    <div class="p-col-4">
        <div class="box box-stretched">4</div>
    </div>
</div>

```

However, the col divs act as the total size is not 12, instead 11 and if the total p-col number is 12 or more, the elements wrap to the next row that I do not want. On the other hand, I have a look at all of the main divs and body paddings and margins but there is no problem with that. I think the padding of the p-cols does not causing this problem and their paddings are also 0-5 px range. Any idea how to fix this problem?

Answer: 
the example in the site shows kind of like this 

i don't think you need 'p-grid nested-grid'

```
<div class="p-grid">
<div class="p-col-8">
    <div class="p-grid">
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-12">
            12
        </div>
    </div>
</div>
<div class="p-col-4">
    4
</div>

```
Remove the `nested-grid` class in the first `div` element, it's not needed as shown in the example.

```
<div class="p-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-12">
                12
            </div>
        </div>
    </div>
    <div class="p-col-4">
        4
    </div>
</div>

```