How can I remove the padding of a blazor page?

Question

I couldn't find a way to remove the padding on the main page. Here is my code:

<div class="box1">    
</div>

<style>
    body{
        background-color:brown;
    }

   .box1{
        width:100%;
        height:100px;
       background-color:yellow;
    }
</style>

And the result is as follows:

I would like to have the yellow box at the top left corner.

I tried to change in the MainLayout.razor the content like so:

<main>
 <article class="content px-0">
        @Body
 </article>
</main>

setting px to 0

I also tried to remove completely the class "content". This removed the top padding but not the left one as shown below:

Has someone an idea how to achieve my goal?

Answer 1

This is the cause. Note the use of !important you probably have been battling with.

MainLayout.razor.css

@media (min-width: 641px) { 

...
    .top-row, article {
       padding-left: 2rem !important;
       padding-right: 1.5rem !important;
    }
}