Hexagonal shapes arranged in circular fashion

Hi,

I want to create a shape with one hexagon with text in the center and six other Hexagons with Text around the center hexagon. Please refer to this screenshot for the design I am looking for:

https://www.awesomescreenshot.com/image/40173804?key=8eddb90041f4332ad9321d6017df4fba

So far, I did it this way:

I created an inner section in which I placed 7 columns and styled them as Hexagons and also placed headers in each column to hold the text. But I am unable to arrange them as described above.

The css code I used for each column to make them Hexagon is

/*Hexagon Clip-Path*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

The class of the inner section is ‘hexagon-layout’.

What is the css code to place in page settings -> Advanced -> Custom css to accomplish the above mentioned shape? Please guide.