I try to move my content section partially on top of my nav bar. Before I added the css code. My content section look fine.

After I add three lines of code in my CSS, my content-section did move little over the nav bar, but my content section's right margin is gone. And content section no longer centered. Please help me to fix this.

Here is my original code:

```css
.content-section {
  /* 10 px on top with nav bar */
  position: absolute;
  margin-top: -30px;
  z-index: 9999;

  padding: 0 10px;
  background: white;
  border-color: black;
  border-width: 5 px;
  border-style: solid;
}
```

```html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style type="text/css">
    body {
      background: lime !important;
    }

    .content-section {
      /* 10 px on top with nav bar */
      /*
    position: absolute;
    margin-top: -30px;
    z-index: 9999;
    */
      padding: 0 10px;
      background: white;
      border-color: black;
      border-width: 5 px;
      border-style: solid;
    }

    .import-notes {
      background: yellow;
      /* add code to make in full width */
      margin-left: -10px;
      margin-right: -10px;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">XYZ123</a>
    </div>
  </nav>
  <div class="container">

    <div class="content-section">
      <p>(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This
        is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is
        a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test
        this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
      <p>(2)This is a test </p>
      <p>(3)This is a test </p>
      <p>(4)This is a test </p>
      <p>(5)This is a test </p>
      <p>(6)This is a test </p>
      <p>(7)This is a test </p>
      <p>(8)This is a test </p>
      <p class="import-notes">This is full width no padding</p>
    </div>
  </div>
</body>

</html>
```