CODEWITHSUNDEEP
htmlcssnavbarcenternav
JackiLeigh
JackiLeigh

Reputation: 25

How can I get my navbar centered perfectly with a logo/image centered on top

I am trying to build a navbar that has a logo/image centered on top with a nav menu below it, centered as well. Currently, my nav links are off center, slightly to the right. How can I get these nav links centered on that second line in the header?

I have tried using position: relative; under nav ul {} and nav li {}, but there were no changes.

I cannot seem to figure out what I've done wrong so far, it's probably something simple I'm looking past.

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <title>House of Vibe Productions</title> 
            <!-- title appears in browser tab -->
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
            <!-- linking to stylsheet.css file for styling --> 
        <link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
            <!-- linking to the favicon -->
        <meta charset="UTF-8"> 
            <!-- UTF-8 is the default character set for HTML5 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
            <!-- width=device-width sets the width of the page to follow the screen-width of the device --->
            <!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
        <meta name="robots" content="index, follow">
            <!-- allows the spider of a search engine to index the whole website -->
        <meta name="keywords" content="house of vibe, production, music, studio, artist, artists, los angeles, ">
        <meta name="description" content="House of Vibe Productions">
            <!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
        <meta name="author" content="Jacki Leigh Designs">
    </head>
    <body>
    <div id=wrapper>


    <header>
        <div class="container">

            <div class="headerLogo">
            <a href="index.html">
            <img src="https://via.placeholder.com/200x50?text=HOV+Productions+Logo+Placeholder" alt="HOV Productions Logo" class="headerLogoImg">
            </a>
            </div>

            <nav>
                <ul class="nav-links">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

        </div>
    </header>    

    <br />

    <div class="mainImg">    
        <img src="https://via.placeholder.com/300x100?text=HOV+Image+Placeholder" alt="Main Image" class="mainImgIndex">  
    </div> 

    <br />
    <br />  

    <footer>
        <small>copyright &copy; <script type="text/javascript">document.write(new Date().getFullYear());</script> House of Vibe Productions</small>
        </style>
    </footer>

    <br />

    </div>
    </body>
</html>

CSS: 

body {
    margin: 0;
    background-color: #B73114;
    font-family: sans-serif;
    font-weight: 300;
    font-style: normal;
}

#wrapper { /* site wrapper div */

}

header {
    background-color: #FDEEFD;
    width: 100%;
}

.container { /* container div for header (nav bar) */
    text-align: center;
    display: block;
}

.headerLogo {

}

.headerLogoImg {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 8px;
}

nav {
    text-transform: uppercase;
    padding: 4px;
}

nav ul {
    margin: 0;
    padding: 2px;
    list-style: none;
    text-align: center;
}

a {
    text-decoration: none;
}

nav li {
    display: inline-block; /* places list horizontal, not vertical */
    margin-left: 30px; /* specifies the space between the list items */
    font-size: 15px;
}

.nav-links { /* navigation links */

}

.mainImg { /* main image div on index page */
    text-align: center;
}

footer {
    text-align: center;
}

Upvotes: 1

Views: 87

Answers (1)

fatih
fatih

Reputation: 1010

Change margin-left: 30px; to margin: 0px 15px;. Adding margin on one side only makes it asymmetrical.

Upvotes: 1

Related Questions