Width 100% with White Borders Around It. Why

Width 100% with white borders around it. WHy?

The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :

body{
    margin: 0;
}

If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).

Unknown white border around my content

Some browsers/frameworks/environments add default margin, padding values to either the body or the html.

You have to override the margins/padding to the html or body for the white space to disappear.

Just add the following:

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

EDIT

To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.

Hence the container div overflows its parent thus producing a scroll.

A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #6600cc;
    padding: 20px 0px 0px 50px;
    box-sizing: border-box;
}

Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/

I would suggest you to read more about box-sizing, and the css box model as a whole.

Div padding not disappearing; white border

The <body> element has margin set by default in browsers. Set body { margin:0; } and you shouldn't have margins anymore.

Parent div larger than child by a small white border and I can't figure out why

.body {
  background: #e7e7e7e7;
  font-family: "Muli", sans-serif;
}

.course {
  /*only takes 
  /*padding adding to the existing container*/
  display: flex;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 10px;
  background-image: #fff;
  position: absolute; /*this makes it stuck to the document body or the nearest ancestor which has a parent. When you scroll it's still all good. */
  width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /*this is RELATIVE to the actual elements size. We moved down from doc by 50%, so now need to move up by 50% to balance out. */
  /*ALT: width: 70%;
  left: 15%; */
  max-width: 100%;
  overflow: hidden;
  outline-style: none;
}

h6 {
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 3px;
}

h2 {
  margin-top: 10px;
  letter-spacing: 1px;
}

.preview {
  background: #e40046;
  color: #fff;
  padding: 30px;
  width: 250px;
  position: relative;
  outline-style: none;
  border-radius: 10px 0 0 10px;
  margin-right: 10px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Card UI design</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style>
      @import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        /* box-sizing: border-box; CAN ALSO EDIT SIZE LIKE THIS*/
      }
    </style>
  </head>
  <body class="body">
    <div class="container">
      <div class="course">
        <div class="preview">
          <h6>Course</h6>
          <h2>Web Development</h2>
          <a href="#">View All Chapters</a>
        </div>
        <div class="info">
          <div class="progress-wrapper">
            <div class="progress">
              <span class="progress-text">8/9 Challenges</span>
              <h6>Chapter 4</h6>
            </div>
            <h2>JAVASCRIPT, HTML & CSS</h2>
            <p class="p-trunc">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
              autem culpa architecto dolores quibusdam deleniti pariatur
              corporis, voluptatum ipsa explicabo.
            </p>
            <button class="btn">Next</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Place border in a 100% height and width div - right and bottom border outside

By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!

Take a look at the link above. They have a live example that demonstrates box-sizing.

Width 100% with White Borders Around It. Why