Electron環境にて画面デザイン（HTML　CSS）

現在、Electron環境にてHtml＋cssで画面デザインを行っております。
Htmlやcssがとても初心者の為、うまくデザインができずに困っています。
完成させたいデザインは、
└ 画面が2分割されている（左30％右70％）
└ 右側の画面内にはwebviewが置かれてある
└ 左側の画面にはツールタイトルやボタンが置かれてある

このデザインで、左側の画面に置かれているものを中央配置したいです。
書き方が初心者の為、綺麗に書きなおして下されば嬉しく思います。
よろしくお願い致します。

■ 現在のhtml

<html> <head> <meta charset="UTF-8"> <title>I-Followers</title> <script src="aaa.js"></script> <LINK rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="left_frame"> <div id="auth">

      <h1><p id="authh1">License</p></h1>
      <center>
      <table id="table">
          <tr>
              <td><font color="#ffffff">ID:</font></td>
              <td><input type="text" id="authid"></td>
          </tr>
          <tr>
              <td><font color="#ffffff">PASS:</font></td>
              <td><input type="text" id="authpass"></td>
          </tr>
      </table>
          <br>
          <button class="button" id="clickAuth"><b><b>SEND</b></button>
          
      </center>
  </div>

<div id="main"> <h1 id="h1">ツールタイトル</h1><hr> <button id='getListButton' class="button"><b>ボタン１</b></button> <button id='iineButton' class="button"><b>ボタン２</b></button> <button id='followButton' class="button"><b>ボタン３</b></button> <button id='autoScrollButton' class="button" onclick='scrollDown();'><b>Scroll</b></button> <div id="memberUrls"> </div> </div> </div> <div id="right_frame"> <webview id="mainWebview" src="https://www.instagram.com/" preload="webview/webview.js" autosize="on"></webview> </div> </body> </html>

■現在のcss

#h1{
color: #fff;

font-size: 60px;
letter-spacing: 4px;
font-family: 'Ubuntu', sans-serif;
text-align: left;
text-shadow: 0 0 12px #fff;
}

#main{
display: none;

}

#auth{
/display: none;/
}

#authh1{