try putting a margin-right: 50px or something on your nav tag
Solution 1 :
Solution 2 :
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li><a href="#">Deals</a></li>
<li><a href="#">Radiostyrt</a></li>
<li><a href="#">El-fordon</a></li>
<li><a href="#">Kontakta oss</a></li>
<li><a href="#">Media Galleri</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Solution 3 :
put margin-right: how much you want px on your nav tag, and don’t forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
Problem :
i’m here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li><a href="#">Deals</a></li>
<li><a href="#">Radiostyrt</a></li>
<li><a href="#">El-fordon</a></li>
<li><a href="#">Kontakta oss</a></li>
<li><a href="#">Media Galleri</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Comments
Comment posted by yinsweet
Remove
Comment posted by manin
forget what i sad about the div.