Question: I am recently facing a practical problem.I am working with ajax form submission and there has been some checkboxes.I need all checkboxes with same name as key value pair.Suppose there is 4 checkboxes having `name` attribute `=checks` so i want something like `$arr['checks'] = array(value1, value2, ...)`

So i am getting my ajax $\_POST code as suppose like: `name=alex&checks=code1&checks=code2&checks=code3`

I am using below code to make into an array

```
public function smdv_process_option_data(){
    $dataarray = array();
    $newdataarray = array();
    $new = array();
    $notices = array();
    $data = $_POST['options']; // data received by ajax

    $dataarray = explode('&', $data);
    foreach ($dataarray as $key => $value) {
        $i = explode('=', $value);
        $j = 1;
        if(array_key_exists($i[0], $newdataarray)){
            if( !is_array($newdataarray[$i[0]]) ){
                array_push($new, $newdataarray[$i[0]]);

            }else{
                array_push($new, $i[1]);

            }
            $newdataarray[$i[0]] = $new;
        }else{
            $newdataarray[$i[0]] = $i[1];
        }

    }

    die($newdataarray);
}

```

Here i want `$newdataarray` as like below

```
array(
   'name' => 'alex',
   'checks => array(code1, code2, code3),
)

```

But any how I am missing 2nd value from `checks` key array.

Answer: 
Make sure you are targeting the right elements, avoid confusing classes (`.container-parent`) with ids (`#container-parent`);

The `flex-direction: row` is not needed, since `row` is the default value for the property; also consider using the `flex` property as well, shorthand for: `flex-grow flex-shrink flex-basis`; which will help you setup the behavior and size you want your flex items to have.

```css
* {
  box-sizing: border-box;
}

#container-parent {
  display: flex;
  background-color: red;
  flex-wrap: wrap;
}

#container-parent>div {
  background-color: blue;
  min-height: 100px;
  flex: 1 0 33%;
  text-align: center;
  border: 1px solid black;
}
```

```html
<section id="container-parent">
  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>
</section>
```

For your issue regarding the centered text, try changing your rule with this:

```
#container-parent>div {
  display:flex;
  color:white;
  background-color: blue;
  min-height: 350px;
  flex: 1 0 33%; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family:"Raleway" , sans-seriff;
}

```
The issue is caused by id="container-parent"

```
<section id="container-parent">
      <div class="d-flex flex-row">
  <div class="p-2 flex-column col-4">Flex item 1</div>
  <div class="p-2  flex-column col-4">Flex item 2</div>
  <div class="p-2  flex-column col-4">Flex item 3</div>
</div>

<div class="d-flex flex-row">
  <div class="p-2 bg-info  flex-column col-4">Flex item 1</div>
  <div class="p-2 bg-warning  flex-column col-4">Flex item 2</div>
  <div class="p-2 bg-primary  flex-column col-4">Flex item 3</div>
</div>

    </section>

```

css

```
#container-parent {
    background-color: red;
}

```

add this in head tag

```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

```

[Here is one good example](https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_nested_grid_1)!
Hope it helps you