Question: Please, see image below and you will see what I talking about.

When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.

Summernote url: <http://summernote.org/#/>

![Check out the image of Modal inside another Modal](https://i.stack.imgur.com/cCAOB.png)

Thanks.

Answer: 
On the border div, you can remove the margin and add:

```
position: relative;
top: 50px;

```
Seems to me that the problematic margin is here:

```
ul {
    margin-top: 100px;
}

```

Remove or shrink that and add your margin to `.border` as intended.

```css
body {
  font-size: 100%;
  font-family: Lato;
}
img {
  width: 100%;
  height: auto;
  max-height: 640px;
}
h2 {
  font-size: 3.2em;
  font-weight: 300;
  text-align: center;
  margin-top: 160px;
}
ul {
  text-align: center;
  overflow: hidden;
  margin-right: 25px;
}
ul > li {
  display: inline-block;
  padding: 0 25px;
  font-size: 1.1rem;
}
#circle {
  font-size: 1.2rem;
  border: 1px solid black;
  border-radius: 5px 20px 5px;
  padding: 0 20px;
}
.border {
  overflow: hidden;
  border: 2px solid black;
  margin-top: 50px;
  ;
}
```

```html
<div class="cover">
  <div class="grid"></div>
  <div class="row">
    <div class="c12">
      <div class="border"></div>
      <div class="clear"></div>
      <ul>
        <li id="circle">H</li>
        <li>Home</li>
        <li id="circle">A</li>
        <li>About</li>
        <li id="circle">W</li>
        <li>Work</li>
        <li id="circle">C</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="c12">
      <h2>Exquisite Web Development</h2>

    </div>
  </div>
</div>
```