KrMa KrMa - 25 days ago 9
HTML Question

headline is not positioning correct

I would like to make a headline 2 and headline 3 like this:

enter image description here

As it is now the menubar under "kompetencer" looks like this: mySite

I have tried to add the Headline 2 and 3 in the following code, but they are not on a straight line when I do it like this

<li class="dropdown mega-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<h4 class="title">Design</h4>
<div class="row">
<div class="col-sm-4">
<div class="divider"></div>
<ul class="menu">
<li ><a href="page-about.html"><i class="fa fa-angle-right"></i>About Us 1</a></li>
<li ><a href="page-about-2.html"><i class="fa fa-angle-right"></i>About Us 2</a></li>
<li ><a href="page-about-3.html"><i class="fa fa-angle-right"></i>About Us 3</a></li>
<li ><a href="page-about-4.html"><i class="fa fa-angle-right"></i>About Us 4</a></li>
<li ><a href="page-about-me.html"><i class="fa fa-angle-right"></i>About Me</a></li>
<li ><a href="page-team.html"><i class="fa fa-angle-right"></i>Our Team - Options 1</a></li>
<li ><a href="page-team-2.html"><i class="fa fa-angle-right"></i>Our Team - Options 2</a></li>
<li ><a href="page-team-3.html"><i class="fa fa-angle-right"></i>Our Team - Options 3</a></li>
<li ><a href="page-coming-soon.html"><i class="fa fa-angle-right"></i>Coming Soon Page</a></li>

</ul>
</div>
<div class="col-sm-4">
<h4 class="title">HEADLINE 2</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="kompetencer.php"><i class="fa fa-angle-right"></i>Kompetencer</a></li>
<li ><a href="page-contact.html"><i class="fa fa-angle-right"></i>Contact 1</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">HEADLINE 3</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="page-404.html"><i class="fa fa-angle-right"></i>404 error</a></li>
<li ><a href="page-404-2.html"><i class="fa fa-angle-right"></i>404 error - Parallax</a></li>
<li ><a href="page-affix-sidebar.html"><i class="fa fa-angle-right"></i>Sidebar - Affix Menu</a></li>
<li ><a href="page-left-sidebar.html"><i class="fa fa-angle-right"></i>Left Sidebar</a></li>
<li ><a href="page-right-sidebar.html"><i class="fa fa-angle-right"></i>Right Sidebar</a></li>
<li ><a href="page-two-sidebars.html"><i class="fa fa-angle-right"></i>Two Sidebars</a></li>
<li ><a href="page-two-sidebars-left.html"><i class="fa fa-angle-right"></i>Two Sidebars Left</a></li>
<li ><a href="page-two-sidebars-right.html"><i class="fa fa-angle-right"></i>Two Sidebars Right</a></li>
<li ><a href="page-no-sidebars.html"><i class="fa fa-angle-right"></i>No Sidebars</a></li>
<li ><a href="page-sitemap.html"><i class="fa fa-angle-right"></i>Sitemap</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Premium HTML5 Template</h4>
<p class="mb-10">The Project is perfectly suitable for corporate, business and company webpages.</p>
<img src="images/section-image-3.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>


Result
Result

Can anybody see what is going wrong here?

Answer

You forget to add at first column

<div class="col-sm-4">
<h4 class="title">HEADLINE 1</h4>
                            <div class="divider"></div>
                            <ul class="menu">
                                <li ><a href="page-about.html"><i class="fa fa-angle-right"></i>About Us 1</a></li>
                                <li ><a href="page-about-2.html"><i class="fa fa-angle-right"></i>About Us 2</a></li>
                                <li ><a href="page-about-3.html"><i class="fa fa-angle-right"></i>About Us 3</a></li>
                                <li ><a href="page-about-4.html"><i class="fa fa-angle-right"></i>About Us 4</a></li>
                                <li ><a href="page-about-me.html"><i class="fa fa-angle-right"></i>About Me</a></li>
                                <li ><a href="page-team.html"><i class="fa fa-angle-right"></i>Our Team - Options 1</a></li>
                                <li ><a href="page-team-2.html"><i class="fa fa-angle-right"></i>Our Team - Options 2</a></li>
                                <li ><a href="page-team-3.html"><i class="fa fa-angle-right"></i>Our Team - Options 3</a></li>
                                <li ><a href="page-coming-soon.html"><i class="fa fa-angle-right"></i>Coming Soon Page</a></li>

                            </ul>
                        </div>

For this reason it looks strange first column in comparation with others

Edit: remove Design class that is above