Why are these boxes spaced like this html/css

I have this webpage I'm creating, and I want there to be these three boxes at the bottom. there is a weird space between the background image and the boxes, I want there to only be a 15px space but no matter what I change, it still does this.

#Textboxes {
      width: 1280px;
      height: 600px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
    }

#Textboxes div {
      list-style: none;
      display: inline;
      width:427px;
      height:600px;
    }

.Text-sub ul {
      display: inline-block;
      background-color: #3f3f3f;
      list-style: none;
      width: 378px;
      height: 600px;
      margin-left: 5px;
      opacity: 0.7;
      filter: alpha(opacity=70);
      margin-top: 10px;
    }

.Text-sub ul:hover {
      background-color: #696969;
      transition: all 0.6s;
      opacity: 100;
      filter: alpha(opacity=0)
    }

.Text-sub ul li h2 {
      text-align: center;
    }

.Text-sub ul li h3 {
      text-align: center;
    }

.Text-sub ul li h4 {
      text-align: center;
    }
.Text-sub ul li a {
      color: black;
    }
.Text-sub ul li p {
      padding-right: 30px;
    }

 
            <div id="Textboxes">
            <div class="Text-sub">
                <ul id="info">
                    <li>
                        <h2>Information Example</h2>
                    </li>
                    <li>
                        <p>This is where information about the company will go.</p>
                    </li>
                </ul>
            </div>
            <div class="Text-sub">
                <ul id="FAQ">
                    <li>
                        <h3>FAQ Example</h3>
                    </li>
                    <li>
                        <p>This is where Frequently asked questions will go</p>
                    </li>
                </ul>
            </div>
            <div class="Text-sub">
                <ul id="More">
                    <li>
                        <h4>More</h4>
                    </li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Store Locator</a></li>
                    <li><a href="#">Social Media</a></li>
                </ul>
            </div>
        </div>