Html – Trying to create simple page: No margins/padding, scroll only main

Most of your problems come from what @Azu explains in the comments: Some html tags have default styles set by the browser. These styles come from the user agent stylesheet. To make their life easier, many developers like using a CSS Reset, which is simply a set of CSS rules that are added before your own stylesheet and that take care of clearing out some of the decisions the browser took (for example, the default body margin). Some popular CSS Resets are normalize.css or the Meyer Reset.

Right now, you are still seeing some margins because the user agent stylesheet gives <p> tags a top and bottom margin. You can either set all <p> tags to not have a margin or use a CSS Reset to do it for you.

I am unsure what you mean with regards to giving the body a margin/padding of 0 not having an effect. I am currently running your code on Chrome and your definition of:

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

Has the intended effect of removing the default 8px of margin that Chrome gives the body tag.

With regards to your 4th point, I am unsure what you mean but I can see two possibilities:

Option 1: Set the <main> as the only scrollable element

By default, the body is the element which can be scrolled, however you can set any element to scroll its contents. This is achieved with the overflow css property. In your case, you would need to disable scroll on the body, and then set your main to be scrollable (you must also give it a maximum height, otherwise it will just adjust its height to always fit the total content without a need for scroll). The tricky part of this is getting to know what that max-height should be, as it needs to be the total height of the window minus the header and footer. Javascript helps here, but for simplicity’s sake, we can set an arbitrary height in pixels:

body {
  overflow: hidden; /* Disable the document's default scroll */
}

main {
  max-height: 200px; /* This is the arbitrary height that the main will occupy*/
  overflow: auto; /* This means, if the content does not fit, add a scrollbar */
}

This goes most of the way, except you set your footer with a fixed position. As I understand, you are new to css, so I recommend you read about CSS Normal Flow. In summary, this is the way css lays out content one on top of the other. However, certain values of the position property, take an element out of that normal flow and allow it to be on top of other elements (as is the case with fixed). Therefore, we must remove that part of your css:

.my-footer {
  position: static; /* This is the default position value that makes part of the normal flow */
}

This would be one way to achieve what I believe you wish in your 4th point.

Option 2: Make the header and footer stick as you scroll the body

Another option would be to keep the normal body scroll but simply define that both the header and footer should always stay visible during scrolling. This could be done with fixed position as you did before but I would recommend instead using sticky position. This has the benefit that the element still occupies space in the normal flow, so nothing will overlap unless you are currently scrolling. Starting from your css (and ignoring the previous option) you would need:

.my-header {
  position: sticky; /* Tell it to stick when scrolling */
  top: 0; /* Tell it where to stick to! In this case we tell it to stick to the top of the window (0px from the top). */
}

.my-footer {
  position: sticky; /* Tell it to stick when scrolling */
  bottom: 0; /* Tell it where to stick to! In this case we tell it to stick to the bottom of the window (0px from the bottom). */
}

I hope this clears up some of your questions! Like some pointed out in the comments, you can use the Web Inspector on your browser to check out which css rules are being applied, so you can better debug your styles.