Moving link placement inside a navbar - html

Question

I am trying to move things around in the header navbar under #media trying to make my site responsive. I'm tinkering with a bunch of stuff but I've hit a wall.
I'm trying to space out my header navbar links which currently are not spaced apart, and I'm also trying to move my subscription bar to the far right inside the navbar.
Since I have been tinkering with stuff I probably have excess code in places it should not be, if so please let me know so I can understand how moving items functions and what I should avoid in the future.
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: flex;
padding: 10px 0 30px 10px;
}
.header-logo img {
height: 100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 50px 0 0 auto;
padding: 0 0 0 10px;
width: fit-content;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.home-link {
float: right;
padding: 0 0 0 0px;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
list-style: none;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 0px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div {
width: 30px;
}
#hamburger {
display: none;
list-style: none;
}
.hamburger-toggle {
float: right;
padding: 25px 0px 0px 125px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
/* Desktop Media */
#media only screen and (min-width: 1000px) {
header .header-logo {
float: left;
padding: 10px 10px 10px 10px;
height: auto;
width: 220px;
display: table;
}
header nav ul {
margin: 0 auto;
padding-right: 50px;
}
header nav ul li {
padding: 0 0 0 50px;
}
header nav ul li a {
line-height: 150px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
padding: 0 0 0 50px;
}
header .sub {
display: block;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
line-height: 50px;
border: 2px solid #111;
float: right;
padding: 2px 20px;
}
.sub {
margin-left: auto;
height: auto;
position: relative;
z-index: 1000;
width: fit-content;
height: 40px;
background-color: rgb(70, 149, 223);
}
.index-banner {
width: 100%;
height: calc(100vh - 100px);
max-width: 1080px;
margin-right: auto;
margin-left: auto;
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.index-banner h1 {
display: block;
padding: 120px 0 0px 120px;
font-family: 'Karma', serif;
font-size: 60px;
font-weight: 900;
color: #fff;
text-shadow: 4px 4px 16px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
padding: 120px 0 0 0;
}
.nav {
display: none;
}
#hamburger {
display: flex;
line-height: 150px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.hamburger-toggle {
display: none;
}
}
/*INDEX*/
.index-banner {
width: 100%;
height: calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.index-banner h1 {
padding-top: 30px;
font-family: 'Karma', serif;
font-size: 60px;
font-weight: 900;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 4px 4px 16px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
/* HERO SECTION */
.hero-section {
font-family: 'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
width: 100%;
max-width: 1080px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
}
.hero-section {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
max-width: 100%;
font-family: 'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
/* RESPONSIVNESS */
#media only screen and (min-width: 1000px) {
.wrapper {
width: 100%;
margin: 0 auto;
}
.index-banner {
height: 500px;
}
.hero-paragraph {
width: 100%;
margin: 0 auto;
}
.hero-section {
width: 100%;
margin: 0 auto;
}
}
/* BLOG PAGE */
.body-wrapper {
width: 100%;
max-width: 1080px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
padding-top: 50px;
}
.blog-title {
font-family: 'Sorts Mill Goudy', serif;
font-size: 60px;
color: #111;
text-align: center;
display: block;
}
.blog-title div {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
padding: 60px;
width: 50%;
text-align: left;
}
.blog-title div h1 {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
}
/* FOOTER */
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer {
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #fff;
text-align: center;
margin: 170px 0 0 0;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
/* FOOTER RESPONESIVNESS */
#media only screen and (min-width: 1000px) {
footer ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
<body>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav div class="home-link">
<ul>
<li>Home</li>
</ul>
</nav>
<nav>
<div class="hamburger-toggle">
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>The Milestone Hackers Podcast</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may
want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>

Answer 1

Don't have a 3000x3000 px image that is about 100px when displaying. You're logo should be about 20kb at most for that size, not 742 kb.
Don't use float (or absolute), unless you're certain of what you're doing. Floats messes up all the divs that displays blocks. For example, you needed to set a height on your header because the logo was floating.
Start sketching out your design, and put everything in rectangles. You don't need that many elements just to display your header.
If you think your CSS is cluttered. Remove everything and start again, preferably from #3 above.
I added CSS variables. It's always good to have a margin that you keep for all distances. margin-half could be added as well.
:root {
--margin: 10px;
--margin-double: 20px;
}
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
display: flex;
align-items: center;
padding: var(--margin-double);
box-sizing: border-box; /* take padding into account for width */
}
header > .header-logo > a {
display: flex; /* to remove weird spacing behavior in Firefox */
}
header > .header-logo img {
height: 100px;
padding-right: var(--margin);
}
header > nav {
flex: 1 1 auto; /* Take up any free space within <header> */
display: flex;
flex-wrap: wrap;
height: 100%;
}
#media (min-width: 700px) {
header > nav {
justify-content: center;
}
}
header > nav > a {
margin-right: var(--margin);
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
line-height: 24px;
}
header > nav > a::before {
width: 100%;
height: 1px;
}
header > a.sub {
height: 20px;
padding: var(--margin);
align-self: end; /* I didn't know where you wanted the button */
background-color: rgb(70, 149, 223);
color: #fff;
}
<body>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
Home
Podcast
Newsletter
Blog
Contact
</nav>
<a class="sub" href="subscribe.html">Subscribe</a>
</header>
</body>

Answer 2

Best practice to use bootstrap for responsive purpose as it provides n number of components and does have lot's of utility classes so you don't need to write your own CSS most of the places
Check out this link for details on utility classes
here

Answer 3

Here is the simple example by using bootstrap.
HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
https://codepen.io/pgurav/pen/abbaOwW