I've been dabbling in HTML and attempting to create my own website, but I'm encountering an issue with the positioning of my <table> tag. It keeps appearing at the bottom of the site, despite my CSS instructions to prevent it.
The position is set to "relative" but it seems to be extending beyond its parent's borders.
@charset "UTF-8";
body {
background-color: rgba(20, 20, 20, 0.9);
}
div#interface {
position: absolute;
width: 88%;
height: 100%;
margin: -20px auto 0px 50px;
padding: 15px;
background-color: #678fd2;
}
header {
width: 100%;
height: 129px;
}
/* Adjust Email Input */
header table {
position: relative;
margin: 20px 50% auto 700px;
background-color: white;
width: 350px;
height: 20px;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>S</title>
<link rel="stylesheet" type="text/css" href="thunder_css.css" />
</head>
<body>
<div id="interface">
<header>
<figure class="imagem-logo">
</figure>
<!-- INPUT FIELD FOR ENTERING LOGIN INFORMATION -->
<table cellspacing="0" role="presentation">
<tr>
<td>
<input type="email" class="inputtext" name="email" id="email" value tabindex="1" data-testid="royal_email">
</td>
</tr>
</table>
</header>
</div>
</body>
</html>