Instantiating hexagons in a circle around an object

Question

I am trying to instantiate some hexagons around a central hexagon but I'm getting an odd gap between some of them and I cant figure out what's causing it. The hexagons on the top and bottom should be closer to the white hexagon in the middle. I've read up on this site CatLikeCodiing on how to create hexagonal grids and the math looks right. Any ideas what the issues may be?

Hex Grid Image

outerRadius = hexButton.GetComponent<RectTransform>().rect.x;
innerRadius = (Mathf.Sqrt(3) / 2) * outerRadius;        

Debug.Log(string.Format("OUTER RADIUS: {0}", outerRadius));
Debug.Log(string.Format("INNER RADIUS: {0}", innerRadius));   

startPos = Instantiate(hexButton, Vector3.zero, hexButton.transform.rotation);
startPos.transform.SetParent(GameObject.Find("PanelMain").transform, false);
startPos.name = string.Format("Start Hex");
for (int i = 0; i < level; i++)
{
     if (i <= 6)
     {
         var temp = Instantiate(hexButton, new Vector3(outerRadius * 2, 0, 0), hexButton.transform.rotation);       
         temp.transform.RotateAround(hexButton.transform.position, Vector3.back, 60 * i);
         temp.transform.rotation = hexButton.transform.rotation;
         temp.transform.SetParent(GameObject.Find("PanelMain").transform, false);
         temp.GetComponent<Button>().image.color = Color.green;
         temp.name = string.Format("Hex: {0}", i);
     }            

}

FIX

Hex Fixed

#region 
outerRadius = hexButton.GetComponent<RectTransform>().rect.y * 0.5f;
innerRadius = (Mathf.Sqrt(3) / 2) * outerRadius;
hexWidth = hexButton.GetComponent<RectTransform>().rect.width;
offset = hexWidth * 0.93333333333f;

Debug.Log(string.Format("OUTER RADIUS: {0}", outerRadius));
Debug.Log(string.Format("INNER RADIUS: {0}", innerRadius));
Debug.Log(string.Format("WIDTH: {0}", gap));

startPos = Instantiate(hexButton, Vector3.zero, hexButton.transform.rotation);
startPos.transform.SetParent(GameObject.Find("PanelMain").transform, false);
startPos.name = string.Format("Start Hex");
for (int i = 0; i < level -1 ; i++)
{
    if (i <= 6)
    {
        var temp = Instantiate(hexButton, new Vector3(offset, 0, 0), hexButton.transform.rotation);       
        temp.transform.RotateAround(hexButton.transform.position, Vector3.back, 60 * i);
        temp.transform.rotation = hexButton.transform.rotation;
        temp.transform.SetParent(GameObject.Find("PanelMain").transform, false);
        temp.GetComponent<Button>().image.color = Color.green;
        temp.name = string.Format("Hex: {0}", i);
    }            
}
#endregion

Answer 1

The code would work as expected if your hexagons were symmetrical, meaning that rect.x == rect.y. But your hexagons are not symmetrical, your rect.y is slightly less that rect.x.
The code puts the hexagons along an ideal circle around the center hexagon, and if you imagine a circle with radius rect.x * 2 and with the center in the center point, you'll see that they are definitely placed correctly. How to fix what you get here? Well, I would rather write some new code from scratch so it could take into account the hexagons proportions. For instance, the approach of simple rotation with transform.Rotate() by 60 degrees each won't work reliably if you won't adjust the angle and/or distance from the center point. It already have some offset, barely noticable with only one level of hexagons, but if you add another 12 hexagons around the green ones and than another 24, the gap between 2 hexagons left and right to each other will get increased more and more. On the image you already can see that there is a little gap between top-left and top-right hexagons (same with bottom-left and bottom-right), while there shouldn't be a gap, just like there's no gap between left, center and right hexagons. Yeah, it is also caused by the proportions not being taken into account.
Basically, to properly place the asymmetrical hexagons like these, you would have to place them along an ellipse instead of a circle.
Sorry for not providing code examples. Maybe all you actually need is just make the hexagons symmetrical and it will be fine already, so there's no point in trying to find a new formula.
However, here is a question about getting a point at ellipse at given angle: How to find the point on ellipse given the angle
You could use that to get a point at the ellipse at 60 degrees to place top-right hex at that position, than find a point at the ellipse at 120 degrees to place the top-left hex, and so on.