Why does adding margin to my table move donw my sidebar and how can I fix this?

Question

I have a site with a sidebar and a table being the center of the content. I am trying to move the table down from the top of the screen but any attempt aat margin or padding move the sidebar down in line with it.

*{
    margin:0;
    padding:0;
    list-style: none;
}

body{
    background-color:#292929;
}

.sidebar-menu{
    background-color:#0A0A0A;
    display:flex;
    flex-direction: column;
    width:100px;
    position: fixed;
    height:100%;
    padding: 20px;
    padding-bottom:100px;
    justify-content: top;
    align-items: center;
    border-right: 3px solid #1098F7;
    z-index:1;
}

.sidebar-items{
    margin:40px 0;
}

.sidebar-items:hover{
    color:#1098F7;
}

#sidebar-logo{
    color:#1098F7;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size: 40px;
    margin-top:400px;
    user-select: none;
    }

.fa-solid{
    color:white;
}
.fa-solid:hover{
    color:#1098F7;
}

.table-container {
    margin-left: 143px;
    width: calc(100vw - 143px);
    margin-top: 100px;
    padding:100px;
}

table{
    font-size:30px;
    color:white;
    border-collapse: separate;
    border-spacing: 0 10px; 
    margin-top: -10px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    min-width:1300px;
    margin: auto;
}

@media (max-width:1400px) {
    table{
        min-width: 1000px;
    }
    
}

@media (max-width:1000px) {
    table{
        min-width: 600px;
    }
    
}

tbody tr{
    color:rgb(216, 216, 216);
    background-color: #122d5661;
    height:60px;
}

thead tr{
    color: #1098F7;
    background-color:rgba(9, 4, 31, 0);
}

th, td{
    text-align:center;
    padding:7px 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 20px; 
    border-top-right-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}

<div class="sidebar">
    <ul class="sidebar-menu">
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
        <h1 id="sidebar-logo">HMH</h1>
    </ul>

</div>

<div class="table-container">
    <table>
        <thead> 

            <tr>
                <th>ACTIVITY</th>
                <th>TIME</th>
                <th>DAYS</th>
                <th>T.P.D</th>
                <th>TODAY</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>run</td>
                <td>data</td>
                <td>112</td>
                <td>112</td>
                <td>Yes</td>
            </tr>
        </tbody>

Google inspect is showing me that it is actually moving the body down as well which makes even less sense to me. Any help much appreciated, thank you.

Answer 1

Good day!

You can add this to your CSS file:

.sidebar{
    position: fixed;
    top: 10px;
    left: 10px;
}

With that, the sidebar stays put while you can freely change the position of your table through margin and padding.

Hope this helps, have a nice day! :)