How to move this menu bar to the right - html

Question

I want move objects to the right but don't know how!? Any idea?
. Please help me. Here is the code in HTML and CSS
/*=====================================
= Top Bar
=====================================*/
#top-bar {
height: 42px;
line-height: 40px;
background: #f9f9f9;
color: #888;
font-size: .857em;
border-bottom: 1px solid #f5f5f5;
}
.top-nav ul li {
display: block;
float: left;
}
.top-nav ul {
margin: 0;
padding: 0;
}
.top-nav {
font-family: "Montserrat",Open Sans,Sans-serif;
}
.top-nav ul li a {
color: #111;
text-decoration: none;
display: inline-block;
padding: 0 15px;
line-height: .917em;
color: #888;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .5px;
font-size: .917em;
border-right: 1px solid #eee;
}
.top-notification {
float: right;
}
.top-notification p {
margin: 0;
float: left;
font-size: 13px;
}
.top-notification a {
color: #111;
text-decoration: none;
/* display: inline-block; */
padding: 5px 9px;
line-height: .917em;
color: #888;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .5px;
font-size: .917em;
border: 1px solid #D1D1D1;
margin-left: 22px;
background:#fff;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none!important;
color: #fff;
width:100%;
}
nav ul li a {
color: #fff!important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width:170px;
float:none;
display:list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li > a:after { content: ' +'; }
nav li > a:only-child:after { content: ''; }
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
}
.menu.cloned {
width: 100%!important;
left: 0!important;
}
.menu.cloned nav {
width: 1200px;
margin: auto;
}
Here is HTML codes for my website. I think every thing in is fine here and the problem is in CSS codes.
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>
This is menu bar

Answer 1

You should add some margin-left to your css. As you have not provided your full HTML I cannot say which attribute exactly needs the stylling.
I think you should add margin-left to your menus to increase space between them or to the parent div for shifting the whole navbar to the right. Hope this helps!

Answer 2

I'm going to assume that when you ask how to move them to the right that the ultimate goal is to center the navigation elements inside the blue-green field that is <nav>.
You might also be asking to align the navigation items to the right side of the blue-green field, I've addressed that in my second code snippet.
Center Nav Items
A common way to center something is to move it to the left by 50% and then pull it back 50% of it's width with transform. In order for this to work you'll need to make your <ul> not take up 100% of its parent element. You can do this a number of ways, for simplicity I have set it to display: inline-block;.
This solution will allow you to add/remove <li> and still be centered in <nav>.
nav ul {
display: inline-block;
position: relative;
left: 50%;
padding: 0;
margin: 0;
transform: translateX( -50%);
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none !important;
color: #fff;
}
nav ul li a {
color: #fff !important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li>a:after {
content: ' +';
}
nav li>a:only-child:after {
content: '';
}
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
}
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>
I noticed you included a little more CSS than what was being used by your markup so I removed it.
Align Nav Items to Right
If you are looking to align the navigation to the right side instead of the left side you can float the <ul> to the right. The only catch here is that you will need to clear the float so you can see the background color of .menu. I used the poor man's clearfix, overflow: hidden; but you could use the more modern option of the Micro Clearfix.
nav ul {
float: right;
display: inline;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none !important;
color: #fff;
}
nav ul li a {
color: #fff !important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li>a:after {
content: ' +';
}
nav li>a:only-child:after {
content: '';
}
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
overflow: hidden; /* Clearfix that allows the background of <nav> to be seen with floated child elements. */
}
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>

Answer 3

Just set your nav ul li width to 100/number of items. and it will spread your menu items equally across the bar, removing the gap on the right as much as possible.
You can remove the space between inline block elements as you like by setting margin-right property accordingly.
Replace old nav ul li with this code:
nav ul li {
display:inline-block;
background-color: #2da399;
width:11%;
margin-right: -4px;
}
Doing the menu this way will allow your menu to wrap into various screen widths fully.