Why cant I highlight the text on my screen in my react component?

Question

I am having a very weird issue with selecting the text on my screen in my react component. I want the text to be centered on the screen, so i do the following:

render(props){
            return(
                <div>
                    <div>
                    <div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
                    <Banner lobby_num = {this.props.Lobbycode}/>
                    </div>
                    <div className = "split left">
                    <div style = {{overflow: "auto"}}>
                    <Lobbylist players={this.props.playerlist} images={this.props.pfps}/> 
                    </div> 
                    <MenuButton 
                        style={{fontSize: "30px"}} 
                        text="Leave"
                        onClick={this.leaveLobby}
                    />
                    </div>
                    </div>
                    <div className = "split right">
                        <h1>Pick a Profile Picture</h1>
                        <div className = "centered">
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp1,pfp13,"pfp1"],[pfp2,pfp13,"pfp2"],[pfp3,pfp13,"pfp3"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp4,pfp13,"pfp4"],[pfp5,pfp13,"pfp5"],[pfp6,pfp13,"pfp6"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp7,pfp13,"pfp7"],[pfp8,pfp13,"pfp8"],[pfp9,pfp13,"pfp9"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp10,pfp13,"pfp10"],[pfp11,pfp13,"pfp11"],[pfp12,pfp13,"pfp12"]]}/>
                        </div>
                    </div>
                </div>
            ) 
        }

Here the element to bring your attention to is

<div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
                    <Banner lobby_num = {this.props.Lobbycode}/>
                    </div>

Which is my centered text at the top of the screen, however this yields the following result: [![enter image description here][1]][1] When I left click and drag, for some reason it wont select. However, a change as simple as moving it into the div below it:

render(props){
            return(
                <div>
                    <div>
                    <div className = "split left">
                    <div style = {{display: "flex", justifyContent: "center", overflow : "hidden"}}>
                    <Banner lobby_num = {this.props.Lobbycode}/>
                    </div>
                    <div style = {{overflow: "auto"}}>
                    <Lobbylist players={this.props.playerlist} images={this.props.pfps}/> 
                    </div> 
                    <MenuButton 
                        style={{fontSize: "30px"}} 
                        text="Leave"
                        onClick={this.leaveLobby}
                    />
                    </div>
                    </div>
                    <div className = "split right">
                        <h1>Pick a Profile Picture</h1>
                        <div className = "centered">
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp1,pfp13,"pfp1"],[pfp2,pfp13,"pfp2"],[pfp3,pfp13,"pfp3"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp4,pfp13,"pfp4"],[pfp5,pfp13,"pfp5"],[pfp6,pfp13,"pfp6"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp7,pfp13,"pfp7"],[pfp8,pfp13,"pfp8"],[pfp9,pfp13,"pfp9"]]}/>
                        <ImgRow pfp = {this.props.pfp} pfps = {this.props.pfps} onClick = {this.props.func} images = {[[pfp10,pfp13,"pfp10"],[pfp11,pfp13,"pfp11"],[pfp12,pfp13,"pfp12"]]}/>
                        </div>
                    </div>
                </div>
            ) 
        }

Makes it selectable again, but it is no longer centered: [![enter image description here][2]][2] What is going on, does anyone have any idea how i could get both a centered text and a selectable text, I don't know what i'm doing wrong!

ps, this is my banner code:

class Banner extends React.Component {
    render(props) {
        return <h1 >Game {this.props.lobby_num}</h1>
    }
}

export default Banner;

I tried to directly place the h1 in the original code, but the result remained [1]: https://i.sstatic.net/DKozH.jpg [2]: https://i.sstatic.net/lc3VK.jpg

Answer 1

try adding an id to the Banner, such as id="banner" and try adding this to css

#banner {
  pointer-events: all;
}