Mgiyuk

The centered text on images overlap on a grid using HTML and CSS https://codepen.io/LifuTao/pen/JZaVNX THE HTML: Wannabe Baller Savvy Entrepreneur I'm not like the other guys I know a lot about cars My car is the fastest in the land 5 I'm better than them Toyota driving folks </div> THE CSS: #element{ display: inline-grid; grid-template-columns: [one] 200px [two] 200px [three] 200px; grid-template-rows:200px 200px 200px; position:relative; left:200px; top:100px; } .item { border: 1px solid red; } #bmw { max-width:100%; } .item:hover { transform:scale(1.5); } .overlay { height:100%; width:100%; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:yellow; max-width:100%; } The code is above ^. The problem I'm having is that all the text gets jumbled into one another in the 5th box of the grid and I don't want that. I appreciate any help. ...