Bootstrap Breadcrumb在点击时进入中心潜水

我建立了一个站点地图页面，并在顶部使用面包屑将用户带到他们寻找的直接点，感觉它有点长。然而，当他们点击面包屑的时候，in会进入正确的div，但是in会进入更低的位置。

我的代码

<div class="container" style="border: 1px solid black;">
    <div class="row" style="border: 1px solid black; background-color: #3a5d85; ">
            <h3 style="text-align: center; font-size: 40px;"><b>Site Map</b></h3>
        <ul class="breadcrumb" style="font-size: 18px;">
            <li class="actve"><a href="#Company">Company</a>
            </li>
            <li><a href="#Resources">Resources</a>
            </li>
            <li><a href="#Signs">Signs</a>
            </li>
            <li><a href="#Magnets">Magnets</a>
            </li>
            <li><a href="#Banners">Banners</a>
            </li>
            <li><a href="#Stickers">Stickers & Decals</a>
            </li>
            <li><a href="#Yard">Yard Signs</a>
            </li>
            <li><a href="#Business">Business Signs</a>
            </li>
            <li><a href="#Social">Social</a>
            </li>
        </ul>
    </div>
    <div id="Company">
        <ul>
            <!--Company-->
                <h3>Company</h3>
            <li>About</li>
            <li>Services</li>
            <li>Contact Us</li>
        </ul>
        <!--End Company-->
    </div>
    <div id="Resources">
        <ul id="Resources">
            <!--Resources-->
                <h3>Resources</h3>
            <li>FAQ</li>
            <li>Terms of Sale</li>
            <li>Terms of Service</li>
            <li>Privacy Policy</li>
        </ul>
        <!--End Resources-->
    </div>
    <div id="Signs">
        <ul id="Signs">
            <!--Signs-->
                <h3>Signs</h3>
            <li>Real Estate</li>
            <li>Art Prints</li>
            <li>Street Signs</li>
            <li>Political Signs</li>
            <li>Property Signs</li>
            <li>For Sale Signs</li>
            <li>Safety Signs</li>
            <li>Traffic Signs</li>
            <li>Novelty License Plates</li>
            <li>Oversized Checks</li>
        </ul>
        <!--End Signs-->
    </div>
    <div id="Magnets">
        <ul id="Magnets">
            <!--Magnets-->
                <h3>Magnets</h3>
            <li>General Magnets</li>
            <ul>
                <li>Events</li>
                <li>Restaurants</li>
                <li>Business</li>
                <li>Services</li>
                <li>Political</li>
                <li>General</li>
            </ul>
            <li>Car Magnets</li>
            <ul>
                <li>Events</li>
                <li>Restaurants</li>
                <li>Business</li>
                <li>Services</li>
                <li>Political</li>
                <li>General</li>
            </ul>
            <li>Fridge Magnets</li>
            <ul>
                <li>Promotional</li>
                <li>Calendar</li>
                <li>Reminder</li>
            </ul>
        </ul>
        <!--End Magnets-->
    </div>
    <div id="Banners">
        <ul id="Banners">
            <!--Banners-->
                <h3>Banners</h3>
            <li>Custom Vinyl Banners</li>
            <ul>
                <li>Events</li>
                <li>Birthdays</li>
                <li>Sports</li>
                <li>Schools</li>
                <li>Organizations</li>
                <li>Real Estate</li>
                <li>Religous</li>
                <li>Holidays</li>
                <li>Political</li>
            </ul>
            <li>General Banners</li>
            <ul>
                <li>Events</li>
                <li>Birthdays</li>
                <li>Sports</li>
                <li>Schools</li>
                <li>Organizations</li>
                <li>Real Estate</li>
                <li>Religous</li>
                <li>Holidays</li>
                <li>Political</li>
            </ul>
        </ul>
        <!--End Banners-->
    </div>
    <div id="Stickers">
        <ul id="Stickers">
            <!--Stickers & Decals-->
                <h3>Stickers & Decals</h3>
            <li>Digital Print Decals</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Vinyl lettering</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Window Decals</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Bumper Stickers</li>
            <ul>
                <li>School</li>
                <li>Car Clubs</li>
                <li>Sports</li>
                <li>Political</li>
                <li>"I Heart" Pictures</li>
                <li>Religous</li>
            </ul>
            <li>Store Front Decals</li>
            <ul>
                <li>Store Hours</li>
                <li>Legal Info</li>
                <li>Social Media Decals</li>
            </ul>
        </ul>
        <!--End Stickers & Decals-->
    </div>
    <div id="Yard">
        <ul id="Yard">
            <!--Yard Signs-->
                <h3>Yard Signs</h3>
            <li>Now Open</li>
            <li>Political</li>
            <li>For Sale</li>
            <li>Business</li>
            <li>Promotional</li>
            <li>Events</li>
            <li>Parking</li>
        </ul>
        <!--End yard Signs-->
    </div>
    <div id="Business">
        <ul id="Business">
            <!--Business Signs-->
                <h3>Business Signs</h3>
            <li>Business Signs</li>
        </ul>
        <!--End Business Signs-->
    </div>
    <div id="Social">
        <ul id="Social">
            <!--Social-->
                <h3>Social Media</h3>
            <li>Facebook</li>
            <li>Twitter</li>
            <li>Instagram</li>
        </ul>
        <!--End Social-->
    </div>
</div>
</div>

我可以让它工作在JSfiddle使用完全相同的代码JSfiddle链接

这是我正在工作的网站，工作网站

正如你所看到的，在我的工作网页上，它将超过标题几行?