Why aren't any of my css styles being applied to any of the items in my navigation area?
Question
I am trying to place my 3 list items to the left, and my button to the right. I've checked it over a bunch of times, but I can't find my mistake. Here's the code:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; background: #24252A; } li, a, button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; Color: #edf0f1; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; Color: #edf0f1; text-decoration: none; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul class="nav_links"> <li><a href="about.html">About</li> <li><a href="packages.html">Packages</li> <li><a href="contact.html">Contact Me</li> </ul> </nav> <a class="cta" href="quote.html"><button>Get A Quote</button></a> </header> </body> </html>
1 answers
solution1
0 ACCPTED 2020-05-27 02:42:14
First I must say that you are missing some </a> in the posted code. Make sure you fix them. You can use justify-content: space-between; to make them appear on left and right. I have created a code snipped that may be helpful. Please check this.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; } header{ background-color:tomato; display:flex; align-items:center; justify-content:space-between; height:100px; } nav ul{ list-style:none; display:flex; } nav ul li{ margin-right:10px; } nav ul li a{ text-decoration:none; color:white; }
<header> <nav> <ul class="nav_links"> <li><a href="about.html">About</a></li> <li><a href="packages.html">Packages</a></li> <li><a href="contact.html">Contact Me</a></li> </ul> </nav> <a class="cta" href="quote.html"><button>Get A Quote</button></a> </header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS styles aren't being applied to my forum any one have any idea as to why?
CKEditor - my styles in editor.css aren't being applied
Why aren't my CSS styles being applied when using the :target pseudo class on Wordpress?
Why aren't my CSS rules being applied to flip an image?
Why aren't any of my boxes showing in CSS?
Why arent my CSS styles being applied to on laptop media query?
any changes added to my CSS are no longer being applied in my PHP
Why are my hover styles not being applied?
Why is my css not being applied?
Why aren't any boxes in my game showing up?
Related Tags