3 Replies - 261 Views - Last Post: 23 April 2019 - 05:56 AM

#1 Mysteriouspig   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Why is my navigation menu in the left side and below logo?

Posted 23 April 2019 - 05:19 AM

I don't understand why my navigation menu which was set to the right side became on the left side below my logo. Help me fix and understand this.

html code below:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dixie Marie Laput</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    
    <div class="container">
        <nav>
           <input type="checkbox" id="nav" class="hidden">
           <label for="nav" class="nav-btn">
            <i></i>
            <i></i>
            <i></i>

           </label>
           <div class="logo">
               <a href="#">Dixie Marie</a>
           </div>
           <div class="nav-wrapper">
               <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About Me</a></li>
                   <li><a href="#">Contact</a></li>
                   <li><a href="#">Travel</a></li>
               </ul>

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



css code below:
* {
    box-sizing: border-box;
}


html{
margin:0;
padding:0;
width:100%;
height: 100vh;

}
body{
margin:0;
padding:0;
width:100px;
height: 100vh;
font-family: Poppins;
font-weight: 400;
background-image: url('../image/bg.jpg');
background-repeat:no-repeat;
background-size: 40%;
background-position-x: 100%;

}

nav{
    padding: 8px;

}

.logo{
float:left;
padding: 8px;
margin-left: 16px;
margin-top: 8px;
}

.logo a{
    color: #000;
    text-transform: uppercase;
    font-weight: 700px;
    font-size: 18px;
    letter-spacing: 0px;
    text-decoration: none;
}
nav ul{
    float:right;
}


Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: Why is my navigation menu in the left side and below logo?

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6819
  • View blog
  • Posts: 28,246
  • Joined: 12-December 12

Re: Why is my navigation menu in the left side and below logo?

Posted 23 April 2019 - 05:37 AM

It is because you have only given the body a width of 100px.

Note also that font-weight does not accept a value in pixels. I noticed that with the HTML Validator.

There is also a CSS Validator.
Was This Post Helpful? 0
  • +
  • -

#3 Mysteriouspig   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Re: Why is my navigation menu in the left side and below logo?

Posted 23 April 2019 - 05:48 AM

View Postandrewsw, on 23 April 2019 - 05:37 AM, said:

It is because you have only given the body a width of 100px.

Note also that font-weight does not accept a value in pixels. I noticed that with the HTML Validator.

There is also a CSS Validator.


The link you gave is very helpful. was able to change the error for the font weight.
As for the width, I don't understand what I'm doing can you tell me a ways to fix it? what do i need to set it up?
Was This Post Helpful? 0
  • +
  • -

#4 Mysteriouspig   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-April 19

Re: Why is my navigation menu in the left side and below logo?

Posted 23 April 2019 - 05:56 AM

.... -__- I've solved it. thank you .hoho just 100%

This post has been edited by andrewsw: 23 April 2019 - 06:18 AM
Reason for edit:: removed redundant quote, just use the REPLY button

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1