`<ul>` is not floating all the way in container - html

Question

So i have not seen this problem before, so im not quite sure what to ask but..
I have a menu with is inside a container, i want it to float right, it does but just not all the way, i cant figure what is stopping it. so i need a little help here?
My <ul> is floating right like this:
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
}
but i think it eayser to see in this codepen

Answer 1

The problem is that an element in the .top-bar is too high. Specifically the .top-bar .lang. This has a padding for the top of 1px, causing it to overflow out of it's container. There are two ways to solve this.
The best way is to change the padding on .top-bar .lang.
.top-bar .lang {
padding: 0 10px; // this was 1px 10px 0
font-size: 9px;
border-right: solid 1px #2d2d2d;
}
And the easier way is:
.top-bar .container {
overflow: hidden;
}
As this causes the overflowing content to be hidden.
All that remains then is to remove the padding on the right side of the div collapse navbar-collapse navbar-ex1-collapse.

Answer 2

You need two changes -
Add clear: right; style in ul.nav. I am writing the updated CSS -
nav > div div > div > ul.nav {
position: relative;
float: right;
z-index: 6;
clear: right;
}
Also, add the following CSS -
.collapse.navbar-collapse.navbar-ex1-collapse {
padding-right: 0;
}
Hope this helps :)

Answer 3

The problem coming from the following code.
#media (min-width: 1200px)
.container {
width: 1170px;
}
Your above code will assign the width:1170px to all the monitors which is more than 1200px. It means if I open your code in 1366px monitor, I can see the container with only 1170px;
Change your code according to your needs.