Question: Here's a JSfiddle of my problem <https://jsfiddle.net/d20fo54o/>

The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.

It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.

```css
div {
  background-color: #1D62F0;
  border-radius: 20px;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
div #list {
  background-color: white;
  width: 100%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
div #title {
  color: white;
}
```

```html
<div>
  <h3 id='title'>Hello</h3>
  <div id='list'>
    <p>hello</p>
  </div>
</div>
```

Answer: 
add `margin:0;` for both `p` and `h3`

```css
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto; 
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;    
}
div #title {
color: white;
}
h3, p{
  margin:0;
  }
```

```html
 <div>
        <h3 id='title'>Hello</h3>
        <div id='list'>
            <p>hello</p>
        </div>
    </div>
```
In [chrome dev tools](https://developer.chrome.com/devtools) you can see how margins (the peach coloured bits) affect the overall page.

[![margin](https://i.stack.imgur.com/4j1gZ.png)](https://i.stack.imgur.com/4j1gZ.png)

In this picture, we can see `h3#title` has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.

```
h3#title {
  margin-bottom: 0px;
}

```

That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's `p` that is causing the issue so again we can do something like.

```
p {
  margin-top: 0px;
}

```

**Putting it all together**

Now let's put these little bits of code we've worked out into your CSS.

```css
div {
  background-color: #1D62F0;
  border-radius: 20px;
  text-align: center;
  width: 600px;
  margin: 0 auto;
}
div #list {
  background-color: white;
  width: 100%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
div #title {
  color: white;
}

/* our new code */
h3#title {
  margin-bottom: 0px;
}
p {
  margin-top: 0px;
}
```

```html
<div>
  <h3 id='title'>Hello</h3>
  <div id='list'>
    <p>hello</p>
  </div>
</div>
```

And there we go, the pesky margins are gone and so is the extra spacing.

Hope this helps.