Ah, solved! I noticed that hovering over a line in the inspect window highlights the corresponding HTML element in semi-transparent blue on the page itself. This way I saw that the <div> of the first grid item, (that with span 12), supposed to be the upper rim of the board, extended over the entire board as a 390 x 390 square. Now this <div> had an explicit width:390px style, rather than relying on the grid-template-columns value. I suppose I did this at a time when the container <div> was not yet properly aligned with the items because of the default left padding.
Apparently specifying a width also automatically sets the same height????
Anyway, I removed the explicit width, and now all paddings have been set to 0px this produces an upper rim of exactly the desired size, no longer covering the board.
Ah, solved! I noticed that hovering over a line in the inspect window highlights the corresponding HTML element in semi-transparent blue on the page itself. This way I saw that the <div> of the first grid item, (that with span 12), supposed to be the upper rim of the board, extended over the entire board as a 390 x 390 square. Now this <div> had an explicit width:390px style, rather than relying on the grid-template-columns value. I suppose I did this at a time when the container <div> was not yet properly aligned with the items because of the default left padding.
Apparently specifying a width also automatically sets the same height????
Anyway, I removed the explicit width, and now all paddings have been set to 0px this produces an upper rim of exactly the desired size, no longer covering the board.