How can I remove the padding of a blazor page?

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?