CSS Boxen

[hmm]

Hi,

hier mein Code:

        <header>
            <h1>Skill-Matrix</h1> 
           
            <nav>
                <ul>
                    <li><a href="/">Logout</a></li>
                    <li><a href="/verwalten">Verwalten</a></li>
                    <li><a class="selected" href="/welcome">Willkommen</a></li>
                </ul>
            </nav>
        </header>

        <main>
            Hallo @username.
            <div class="center">
                <table id='tabelleMain'></table>
                <input type="button" value="Neuen Mitarbeiter hinzufügen" onclick="createNewMitarbeiter();"></input>
                <input type="button" value="Ausgewählte Mitarbeiter löschen" onclick="removeMitarbeiter();"></input>
            </div>
            
            <table id='tabelleSkills'></table>
		</main>
            
        <footer>
    		<a href="#">AGB</a> |
    		<a href="#">Impressum</a>
    	</footer>

Dazu folgender CSS:

header {
	display: block;
	top:0px;
	left:0px;
	right:0px;
	position:absolute;
	padding:0px;
	text-align:left;
	font-weight:bold;
	color:#FAFAFA;
	background: #3b5998;
	width: 100%;
	height: 82px;
	z-index:3;	
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #F2F2F2;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #BEBEBE;
}

li a.selected {
    background-color: #BEBEBE;
}

.login {
    float: right;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
}

main {
	background-color: #F2F2F2;
	height:100%;
	overflow:auto;
	position: relative;
        text-align: center;
	color: black;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: #F2F2F2;
}

.center {
	background-color: #FAFAFA;
	position: relative;
	left: 25%;
	width: 50%;
	height: 100%;
	overflow:auto;
}

footer {
	background-color: #F2F2F2;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
        text-align: center;
	color: #045FB4;
}

Meine Tabelle "tableSkills" soll links neben dem div "center" stehen, leider steht sie links darunter. Wie korrigiere ich das?

Mein div center fängt viel zu weit oben an, dadurch sieht man die Hälfte der Tabelle "tableMain" nicht, wie korrigiere ich das?