Issues with Text Alignment

Hello All,

I am looking for some assistance please with trying to position my navigation menu, I am still learning CSS and I have now a brick wall in trying to resolve this issue. As can been seen from the below image I am trying to line up the navigation onto the same level as the text logo.

My CSS and HTML code snippet is shown below


                <div class="header-overlay">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="logo">
                                    <h1>Piran Web</h1>
                                <div class="clearfix"></div>
                                   <ul class="main-nav">
                                       <li><a href="#">Services</a></li>
                                       <li><a href="#">About</a></li>
                                       <li><a href="#">Contact</a></li>
                                       <li><a href="#">Blog</a></li>

CSS Code:

.main-nav {
   float: right;
    list-style: none;
    margin-top: 55px;

.main-nav li {
    display: inline-block;
    margin-left: 40px;

.main-nav li a:link,
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #fff;

.logo h1{
	font-family: 'Inspiration', 'Lora', serif;
	font-size: 90px;
	color: #fff;
    display: inline-block;

.logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;

I’m guessing by the plethora of nested divs and their class names, this also has Bootstrap css applied. Correct?

1 Like

Hi there scjmoore,

if, as @SamA74 has suggested, you’re using “Bootstrap”,
I would stronger suggest that you remove it and start again. :flushed:

Not only does it hinder the learning of CSS, it also produces,
as pointed out, a plethora of unnecessary code bloat. :scream:


1 Like

The class="clearfix" is almost certainly going to ensure that the menu appears below whatever comes before. What happens if you remove it?


Here you see much simpler html and a layout that works.

Hi SamA74,

Yes I am using Bootstrap, should I not use it for the time being?


Hello gandal458, I removed the cleafix and all is ok now :slight_smile: but I am going to remove bootstrap and learn with out it


Thanks SamA74, This is a lot neater. :slight_smile:

Is it worth me still using the following vendor provided CSS instead of bootstrap?



The choice is yours.
Some choose to use Bootstrap, others choose to avoid it.
I can’t recommend any framework or vendor provided CSS because it’s not something I use. But maybe other will.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.