why can't I move some of my tables with positioning? - html

Question

I have managed to get certain bits of my responsive website to work but am still having some issues in terms of moving certain tables. For some reason, I can move the table in certain directions but not for others such as top. For the following table, I would like to move it lower if possible but even when placing the word !important after top, it doesn't work. For the first picture, I can't seem to move it further to the right and for the second, I can't seem to move it further down....
Image 1
Image 2
This is the table code for the first problem
.header2_user_information {
background-color: #FAEBD7;
table-layout: fixed;
width: 110%;
position: relative;
right: 20em;
}
<table class="header2_user_information">
<tr>
<th colspan="2">User\'s General Information</th>
</tr>
<tr>
<th>First Name:</th><td>Mervin</td>
</tr>
<tr>
<th>Last Name</th><td>Lee</td>
</tr>
<tr>
<th>Email Address:</th><td>piano0011#gmail.com</td>
</tr>
<tr>
<th>User ID:</th><td>piano0011</td>
</tr>
<tr>
<th>Administrator Status:</th><td>None</td>
</tr>
<tr>
<th>Moderator Status:</th><td>None</td>
</tr>
<tr>
<th>Premium Membership Status:</th><td>Member</td>
</tr>
</table>
The second is very similar to the first...

Answer 1

There is an explanation on when CSS offset properties can be used. According to FreeCodeCamp:
When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned.
You have position: relative in your code snippet but according to your question you probably forgot it in your actual code. Or you have overridden it somewhere else. (Use your browser's "inspect element" to check it.)
.header2_user_information {
background-color: #FAEBD7;
position: relative; /* Note this line. It is necessary to use CSS offsets */
top: 30px;
left: 2em; /* px, em, percentage or any other value is acceptable */
}
<table class="header2_user_information">
<tr>
<th colspan="2">User\'s General Information</th>
</tr>
<tr>
<th>First Name:</th><td>Mervin</td>
</tr>
<tr>
<th>Last Name</th><td>Lee</td>
</tr>
<tr>
<th>Email Address:</th><td>piano0011#gmail.com</td>
</tr>
<tr>
<th>User ID:</th><td>piano0011</td>
</tr>
<tr>
<th>Administrator Status:</th><td>None</td>
</tr>
<tr>
<th>Moderator Status:</th><td>None</td>
</tr>
<tr>
<th>Premium Membership Status:</th><td>Member</td>
</tr>
</table>