I want my page to be divided in two vertically. This works locally, but not on Chrome when deployed (see screenshots), although it does work on Safari.
Any help appreciated
html
<body><div class="container"><!-- Left Panel: Project Description --><div class="left-panel"><h1>Project Description</h1><p> Welcome to ...</p><p> The bot’s core functionality...</p></div><!-- Right Panel: AlienBot --><div class="right-panel"><h1>Chat with AlienBot</h1><div class="chat-container" id="chat"><!-- Messages will be appended here --></div><div id="message-input"><input type="text" id="user_input" placeholder="Say something..." /><button onclick="sendMessage()">Send</button></div></div></div></body>css
.container { display: flex !important; height: 100vh; /* Full viewport height */}.left-panel, .right-panel { width: 50% !important; padding: 20px;}.left-panel { background-color: #f0f0f0; /* Light background for the description */ box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1); /* Divider shadow */}
I've tried adding !important to the container flex. There are no external css styles that might override the stylesheet.