In gradio, when custom HTML is added, the original width and height are scaled, and almost all page elements are misaligned

When custom HTML is added, the original width and height are scaled, and almost all page elements are misaligned
This is a simple piece of html, but it speaks volumes.

html_code=""'
    <div class="container">
        <div class="left-area">
          <div class="top">
            <a href="https://www.hzau.edu.cn/" >
              <i class="logo"></i>
            </a>
            <div class="horizontal-line"></div>
          </div>
          <div class="middle">
            <ul class="page-list">
              <li class="item">
                <i class="icon icon-star"></i>
                <span class="desc active">教育大模型问答</span>
              </li>
              <li class="item">
                <i class="icon icon-template"></i>
                <span class="desc">用户问答示例</span>
              </li>
              <li class="item">
                <i class="icon icon-file"></i>
                <span class="desc">规章制度文件</span>
              </li>
              <li class="item">
                <i class="icon icon-other"></i>
                <span class="desc">其他内容待补充...</span>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <div class="left">
              <img class="profile" src="/file=images/profile_default.png" alt="用户头像">
              <span class="desc">系统默认用户</span>
            </div>
            <div class="right">
              <i class="icon-exit"></i>
            </div>
          </div>
        </div>
        <div class="right-area">
          <div class="top">
            <h2 class="title">教育大模型v1.0</h2>
            <div class="tool-bar">
                <div class="search-area">
                  <i class="search-icon"></i>
                  <input class="search-input" type="search" placeholder="搜索华农规章制度"></input>
                </div>
                <i class="enter-icon"></i>
                <img class="profile" src="/file=images/profile_default.png" alt="用户头像">
            </div>
          </div>
          <div class="version"></div>
          <div class="bottom">
            <input class="text-input" type="text" placeholder="请在此输入问题..." >
            <button class="submit">发送问题</button>
          </div>
          <div class="warning">
          <span >回答由AI大模型生成，可能带有主观性和随机性，请仔细甄别！</span>
          </div>
          <div class="footer">
            <span class="copyright">© 2024 HuaZhong Agriculture university. All Rights Reserved.</span>
            <a class="hzau-home" href="https://www.hzau.edu.cn/">访问华农官网></a>
          </div>
        </div>
      </div>
    '''
with gr.Blocks(css=css_code, fill_height=True) as demo:
    output= gr.HTML(html_code)


demo.launch(allowed_paths=['./'], share=True)

enter image description here
enter image description here

I checked all gradio documents, but unfortunately there is no clear description, nor the relevant chapters on custom HTML pages, I just want to make my human-machine dialog page look good, that’s all!

You need to sign in to view this answers