I have a couple of problems in my CSS footer. Please run this snippet in Full Page to see how it lays out on a larger display (I will be making it responsive a little later. For now, please just use Full Page).
.small col-md-3 {
font-size: .8em
}
.footer-distributed {
background-color: #34385E;
width: 100%
}
.footer-distributed .footer-links {
color: #ffffff;
}
.footer-distributed .footer-links a {
line-height: 1.8;
color: inherit;
padding: 0 2em;
}
.footer-distributed .footer-left-bar {
border-left: solid;
color: #FFFFFF;
}
footer {
position: fixed;
bottom: 0;
}
<html lang="en">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>
<body>
<footer class="footer-distributed">
<div class="row" style="height: 1em"></div>
<div class="row">
<div class="col-md-3">
<p class="footer-links">
Link Number 123
Link Number 2
Link Number 3
Link Number 4
</p>
</div>
<div class="col-md-6 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">
<p>This information is</br>
always three</br>
lines long
</p>
</div>
</div>
</div>
<div class="col-md-3 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">BRANDING 1</div>
<div class="col-md-6">BRANDING 2</div>
</div>
</div>
</div>
<div class="row" style="height: 1em"></div>
</footer>
</html>
The 4 links on the left. I would like them to be in a left-justified cells of a 2x2 grid no matter how long the text is in them. As you can see, Link 2 is being pushed to the right because Link Number 123 is too long.
The 2 Branding link on the right. I would like them to be side-by-side and centered vertically such that the white separator bar matches the longer white separator bar to the left of the center column.
Can anybody offer any hints on how to accomplish this?? Thank you!!
Hmmm... I guess the comment/answer was deleted. But, it worked out great! The advice was:
Use a 2/2 grid of rows & columns on the left side to space out the
items.
Use white margin lines on both sides of the center chunk,
rather than trying to do left margin lines on the center and right
chunks.
Vertical centering still isn't great, so I may mess around with additional answers to try that out. Thanks!
Here's a slightly rewritten code, without the use of Bootstrap (it's still loaded, of course, but not used for the actual footer).
footer {
background-color: #34385E;
color: #FFF;
position: fixed;
bottom: 0;
width: 100%;
min-height: 7em;
box-sizing: border-box;
padding: .5em 0;
}
footer ul {
list-style-type: none;
}
.footer-links a {
line-height: 1.8;
color: inherit;
width: 100%;
}
#footer-container div:nth-of-type(2) {
border-left: solid;
padding-left: 1em;
display: flex;
flex: 2 1 0;
}
#footer-container div:nth-of-type(2) p {
flex: 1 1 0;
margin: auto;
}
#footer-container div:first-of-type {
max-width: 30%;
}
#footer-container div:first-of-type ul {
display: flex;
flex-wrap: wrap;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
#footer-container div:first-of-type ul li {
flex: 1 1 50%;
display: block;
margin: auto;
}
#footer-container {
display: flex;
min-height: 7em;
}
#footer-container div {
flex: 2 1 0;
}
#footer-container div:last-of-type {
margin: auto;
border-left: solid;
flex: 1 1 0;
}
#footer-container div:last-of-type ul li {
display: inline-block;
}
<html lang="en">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>
<body>
<footer>
<div id="footer-container">
<div>
<ul class="footer-links">
<li>Link Number 123</li>
<li>Link Number 2</li>
<li>Link Number 3</li>
<li>Link Number 4</li>
</ul>
</div>
<div>
<p>This information is<br>
always three<br>
lines long
</p>
</div>
<div>
<ul>
<li>BRANDING 1</li>
<li>BRANDING 2</li>
</ul>
</div>
</div>
</footer>
</html>
Just add <div> in your HTML:
<p class="footer-links">
<div class= 'footer-left-container'>
<div class= 'option'>Link Number 123</div>
<div class= 'option'>Link Number 2</div>
<div class= 'option'>Link Number 3</div>
<div class= 'option'>Link Number 4</div>
</div>
</p>
Add in your CSS:
.footer-left-container{ overflow: auto; margin-left: 10px; }
.option{ width: 130px; float: left; margin-top: 1px; margin-left: 2px; }
As for your second question I could not understand what exactly you require.
Related
I'm using Bootstrap to style my html page. This is what I'm getting:
Both word are at the top of the screen but I'd like for them to be in middle vertically. Also they are in the center horizontally and I need them to be on the left and the right side of the screen.
Something like this:
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<div class="container">
<div class="row align-items-center">
<div class="col align-self-start">
Hello
</div>
<div class="col align-self-end">
World
</div>
</div>
</div>
</body>
<script src="script.js" defer></script>
</html>
I've tried different approach but very little change no metter how I edit my code.
Bootstrap has classes for vertical alignment. You’d want align-middle - bootstrap docs
Perhaps you mean align the text? somewhat unclear on the question if you mean the text to the entire "block" of the column.
.container *,.container-fluid * {
border: solid 1px pink;
padding: 1rem;
}
.test-high{height: 14rem;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container ">
<div class="row align-items-center test-high">
<div class="col text-left">
Hello
</div>
<div class="col text-right">
World
</div>
</div>
</div>
<div>A ml-auto example for the entire div removed the col class</div>
<div class="container">
<div class="row test-high align-items-center ">
<div>Hello</div>
<div class="ml-auto">World</div>
</div>
</div>
<div>A col example for the entire div as a column - note content may get outside its container col-1 and need say col-2 etc. ml-auto does the fun alignment</div>
<div class="container-fluid">
<div class="row test-high align-items-center ">
<div class="col-1">Hello</div>
<div class="ml-auto col-1">World</div>
</div>
</div>
body, html {
height: 100%;
background:#c9edff;
}
body {
margin: 0;
background: teal;
}
a {
text-decoration: none;
color: black;
font-family: 'roboto';
}
.align-self-start {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 10px;
margin: 0 auto;
left: 0%;
background: whitesmoke;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-start li {
padding-left: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-right: 10px;
margin: 0 auto;
right: 0%;
background: darkgreen;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-end li {
padding-right: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end a {
color: yellow;
margin: auto;
}
.nav_bar {
width: 100%;
background: lightblue;
display: inline-flex;
}
.nav_bar li {
margin: auto;
list-style: none;
}
.nav_bar a {
color: black;
}
a {
margin: auto;
text-align: center;
}
.border_form {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.border_form input{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
}
.border_form input:focus{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
.border_form button {
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
footer {
bottom: 0;
box-shadow: 0px 0px 1px;
background-color: yellow;
position: absolute;
width: 100%;
text-align: center;
}
footer li {
list-style: none;
display: inline-flex;
}
footer a {
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="border_form">
<form>
<input type="text" class="username_css" placeholder="Username">
<br>
<br>
<input type="password" class="password_css" placeholder="Password">
<br>
<br>
<button type="submit">Login</button>
</form>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col align-self-start">
<ul>
<li>Hello 1</li>
<li>Hello 2</li>
<li>Hello 3</li>
<li>Hello 4</li>
</ul>
</div>
<div class="col align-self-end">
<ul>
<li>World</li>
<li>World 2</li>
<li>World 3</li>
<li>World 4</li>
</ul>
</div>
</div>
</div>
<footer>
<ul>
<li>Footer</li>
<li>Footer 2</li>
<li>Footer 3</li>
</ul>
</footer>
</body>
</html>
// for all 1080p screens
Its been updated. This method will work on any browser. If it is not working on any other browser.. Then you need to use
#media only screen and (max-width: 1920px) {
.your_div {
}
}
// for iphone se
#media only screen and (max-width: 375px) {
.your_div {
}
}
^^
and you need to add
I'm currently working on putting together a very basic site and using CSS/ Bootstap. I am unable to figure out however why my columns are stacking on each other. I've looked through Stack Overflow and the official bootstrap documentation and as far as I can see, it should be working: I am looking to create three equal columns underneath the "about me" header that span the page.
<!DOCTYPE html>
<html lang="en">
<title>Testing | </title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap Core CSS-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Copse|Cutive|Lora:700|Sanchez|Scope+One|Slabo+27px|Trocchi|Vesper+Libre" rel="stylesheet">
<style>
header {
text-align: center;
background: url('sunlightthroughgrass.jpg');
background-size: cover;
color: black;
width: auto;
height: auto;
}
a {
color: white;
}
h1 {
font-family: 'Vesper Libre', serif;
font-size: 70px;
}
img {
max-width: 400px;
max-height: 400px;
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
width: auto;
height: auto;
}
ul {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
<!-- article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}-->
</style>
</head>
<body>
<div class="container-fluid">
<header>
<img src="robin.jpg">
<h1>Test Person|Testing</h1>
<ul class="nav nav-pills">
<li>About Me
</li>
<li>Resume
</li>
</ul>
</header>
<div class="row">
<div class="col-lg-4">
Test Test Test
<div class="col-lg-4">
Nother Test
<div class="col-lg-4">
Third Nother Test
</div>
</div>
</div>
</div>
<!-- SCRIPTS GO UNDER HERE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--Anti-Spam-->
<script type="text/javascript" src="js/obscure.js"></script>
You are nesting your col-lg-4 divs, do it like this instead:
<div class="row">
<div class="col-lg-4">
Test Test Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
</div>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>
i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}