Develop Reference

Unable to properly show content in all devices

I'm making a car research/ranking website using React. Coming to the issue, I have 3 cards, with content on it once you hover over it.
It works perfectly well in desktops, but it doesn't properly show content in smaller devices: it overflows to the other section.
To fix this, I have added a media query to it, but it doesn't work either.
Please check my code:
.sec2 {
height: 100vh;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(https://static.feber.se/article_images/48/81/62/488162_1920.jpg)
no-repeat top center;
}
.wrapper {
display: flex;
width: 90%;
justify-content: space-around;
}
.card {
width: 350px;
height: 370px;
border-radius: 15px;
padding: 1.5rem;
position: relative;
object-fit: fill;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 2rem;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}
#media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 270px;
padding: 1rem;
width: 250px;
margin-bottom: 10px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 15px;
}
.card .info button {
padding: 0.4rem;
font-weight: normal;
font-size: 12px;
}
}
#media (max-width: 600px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 15%;
padding: 0.3rem;
width: 180px;
margin-bottom: 5px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 10px;
}
.card .info button {
padding: 0.3rem;
font-weight: normal;
font-size: 10px;
}
}
And
<div>
<header className="sec2" id="section2">
<h1>
What is in this website?
</h1>
<div class="wrapper">
<div class="card">
<img src="https://cdn.jdpower.com/JDPA_2022%20Genesis%20G70%20Red%20Front%20Quarter%20View.jpg" />
<div class="info">
<h1>Car Rankings</h1>
<p>
It contains cars ranked based on body type, done after
comprehensive research.
</p>
<button>Go</button>
</div>
</div>
<div class="card">
<img src="https://i0.wp.com/autonxt.net/wp-content/uploads/2018/01/autocontentexp.com2018-Lincoln-Navigator5-5b1aebecc618f268352b037fb2253a291d670994-1.jpg?resize=2500%2C1500&ssl=1" />
<div class="info">
<h1>Car Reviews</h1>
<p>Contains reviews of selective cars written by us.</p>
<button>Read More</button>
</div>
</div>
<div class="card">
<img src="https://static0.hotcarsimages.com/wordpress/wp-content/uploads/2020/09/AWD-e1600115646672.jpg" />
<div class="info">
<h1>Used Cars/h1>
<p> We rank used cars so that you will only get the best out of it.
</p>
<button>Read More</button>
</div>
</div>
</div>
</header>
</div>
Image in computer: click, and
Image in smaller devices: click

first add the margin: auto in .wrapper class and some margin: 5px; to .card class because this make content in the center and looks good.
.wrapper {
display: flex;
width: 90%;
margin: auto;
justify-content: space-around;
}
.card {
/* your code */
margin: 5px;
}
Now, add just update margin: 15px; of all .card instead of margin-bottom
Here is the full code, https://codesandbox.io/s/laughing-gwen-4i47v5?file=/src/Home.jsx

Overflow hidden on bottom of image

Im trying to hide the bottom of the girl image when the 3D background is triggered. I tried to add the overflow: hidden; to the test-imgplace class and it doesn't look right.
Is there a better way to fix it?
See what I did on JSFIDDLE
.card .image {
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
pointer-events: none;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text {
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card {
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content {
transform-style: preserve-3d;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in {
transition: .3s ease-out;
}
.hover-out {
transition: .3s ease-in;
}
.card-hover {
margin: 0;
}
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>

Checkbox with classList.toggle isn't toggling the classes. No errors shown

I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...

The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>

CSS Filter Blur 0 Affects Box-Shadow to Not Display

I have a box that scales to 1.1x when hovered, but because the text becomes blurry, I used filter: blur(0) and that solved the issue (only to FireFox) . By using filter: blur(0) on the parent, the box-shadow property on the children elements stopped working.
I tried using a before and after pseudo-element but that didn't work either. Is there anything I can do to fix my issue?
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>
Weirdly enough, the code is not the same as what I have but the code is similar. From this result, they are issues I faced while modifying the card like the position of the card when flipping, the text still being blurry, and the drop shadow not appearing.
Thank you.
Chavez

Add
filter: drop-shadow(1px 10px 4px #696982);
to your card. This way you can have both the blur and the shadow around your element.
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}
body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
filter: drop-shadow(1px 10px 4px #696982);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}
<div class="r_card">
<div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);">
<div class="r_card-front r_card3">
<div class="r_card-header">
<h3>Standard</h3>
<p>Standard</p>
</div>
<div class="r_card-image"><img src="#">></div>
<div class="r_card-description">
<p>P Tag</p>
<div class="r_card-links">
More Info<br>
More Info
</div>
</div>
</div>
<div class="r_card-back">
<h1>Peter</h1>
<p>Art.</p>
<p>Ext</p>
</div>
</div>
</div>

CSS: Navigation Bar

Building a website for my company, first one. And I’m having trouble getting the navigation bar to be horizontal, and placed in the top right corner of the browser.
The whole top section is a <div> (similar to the StackExchange site), and I currently have three elements floating to the top left (logo, name, tagline).
I’m trying to get the navigation bar horizontal and floating to the right, except I can’t locate it there. It keeps appearing outside of the black bar, and beneath the three left floating elements.
HTML code:
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"</div>
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>
<!-- <div class="bif">
<div class="bif2">
<div id="p1" class="block"></div>
<div id="p2" class="block"></div>
</div>
</div> -->
<ul class="navi">
<li>Home</li>
<li><a href="/about.html" >About</a></li>
<li><a href="/services.html" >Services</a></li>
<li><a href="/pricing.html" >Pricing</a></li>
<li><a href="/contact_us.html" >Contact Us</a></li>
</ul>
</div>
</div>
CSS code for the three left floating elements and the navigation thus far:
.part1 {
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo {
width: 50px;
height: 50px;
float: left;
overflow: visible
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: left
}
.headtag img {
width: 100%;
height: 50px
}
.tagline {
width: 220px;
float: left;
margin: -50px 0px 0px 220px;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li {
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Any help would be greatly appreciated. It’s completely frustrating. If you would like reference as to what I’m trying to do, refer to http://johnnycupcakes.com/.

Style your li so they are display:inline;. They will sit side by side. Also you need to remove your float:left on the li;
.navi li{
display: block;
position: relative;
/*float: left;*/
margin: 0px 5px;
overflow: hidden;
display:inline;
}
You were also missing a closing tag on your img;
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"/></div><!--Closed image tag-->
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>

The line <div class="headtag"><img src="/Images/title.png"</div> has to be changed to
<div class="headtag"><img src="/Images/title.png"/></div> you forgot to close off the image tag.
as well as this, change your css to the following:
.part1{
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo,.headtag,.tagline{
display:inline-block;
background-color:green;
}
.logo {
width: 50px;
height: 50px;
float: right;
overflow: visible;
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: right;
}
.headtag img {
width: 100%;
}
.tagline {
width: 220px;
float: right;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li{
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Have a look at this fiddle

This should do the trick... let me know if this is what your looking for.
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<nav>
<div>
<div id="logo">LOGO</div>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact_us.html" >Contact Us</a>
</div>
<div>
Sign Up
Sign In
</div>
</nav>
<section id="content"></section>
<footer></footer>
</body>
</html>
//CSS
body{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
margin: 0 !important;
height: 100vh;
width: 100vw;
overflow: scroll;
}
nav{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 60px;
z-index: 999;
position: fixed;
background: #1E67CB;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
}
#logo{
display: -webkit-flex;
display: flex;
cursor: default;
-webkit-align-self: center;
align-self: center;
margin-left: 1em;
color: #fff;
font-weight: bold;
font-size: 1.15em;
line-height: 1.43;
-webkit-font-smoothing: antialiased;
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
width: 50vw;
display: -webkit-flex;
display: flex;
}
nav>div:nth-of-type(1){
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
nav>div:nth-of-type(2){
-webkit-justify-content: center;
justify-content: center;
}
nav>div:nth-of-type(3){
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
nav>div>a{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
text-decoration: none;
cursor: pointer;
color: #fff;
font-size: 1em;
font-weight: 300;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
margin: 0 .5em;
padding: 0.6em 1.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
nav>div>a:hover{
background: rgba(255,255,255,0.15);
}
nav>div>a:active{
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
background: rgba(255, 255, 255, 0.15);
}
nav>div>a:nth-of-type(2):hover{
background: rgba(255, 255, 255, 0.37);
}
#content{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 200vh;
}
footer{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 100px;
bottom: 0;
background: #5c5c5c;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}