This element is causing an element to overflow in Firefox-CodePudding

I don't use Bootstrap or reset.css/reboot.css, I am trying to built a website with generic css. I am doing pretty basic things but I get "This element is causing an element to overflow" literally everywhere. I haven't done layouts without any css framework for quite some time and I can not find anything about this issue. Even a br is causing an overflow! What is this? I don't see any scorlls and everything looks just like I expect. This message is just annoying.

I inspected a little bit more and discovered that images are causing this. But I have

.img-responsive, .responsive {
    height: auto;
    max-width: 100%;
}
.img-thumbnail, .thumbnail {
    padding: 0.25rem;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

And if I delete this image, overflow message will go away for a few elements below. Can anybody tell me what's going on?

CodePudding user response：

This will help.

html {
    width: 100%;
}

CodePudding user response：

I suggest to create a reset in html

/* ------------ Reset CSS ------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}