I have two questions regarding flexbox...
I want space between the ul items in the navbar, now they are glued together... How can I get some space between the link. I can use padding-right on each
- How can I can center the 6 company images in the footer? As you can see I have three media queries. So I need all images in one column on mobile, 2 logos each row on second media query and 3 logos in each row on desktop.
/* -- reset -- */html { box-sizing: border-box;}*,*:before,*:after { box-sizing: inherit;}ul { padding: 0; list-style-type: none;}/* div,section,footer,nav { border: 1px solid black; overflow: auto;} *//* -- typography -- */html { font-size: 10px;}body { font-family: "Lato", sans-serif; margin: auto; background-color: #f4f3f4;}p { color: #5b5e6d; font-size: 1.8em;}h1,h2 { color: #2c303f; font-family: "Times New Roman";}ul { line-height: 2.5em; font-size: 1.5em; color: #5b5e6d;}/* -- layout -- */.container { margin: 0 20px;}/* -- components -- *//* -- components / buttons -- */.btn { border-radius: 4px; box-shadow: none; line-height: 1.2em; border: none; padding: 25px; box-shadow: none; font-size: 1.8em; font-weight: 700;}.btn-main { background-color: #192592; color: white; width: 100%; width: 100%; color: white;}.btn-second { background-color: white; color: #192592; border: 1px solid #192592; width: 60%; margin: 10px;}/* -- components / navbar -- */.navbar { background-color: #f4f3f4; position: fixed; width: 100%; z-index: 99999; border-bottom: 1px solid #b8b8b8; height: 60px;}.navbar .container { display: flex; justify-content: space-between; align-items: center;}.navbar .top-menu-links { visibility: hidden;}.navbar .link-list { display: none;}.navbar .fa-bars { color: #5b5e6d;}.navbar .logo { height: 60px;}.landing { margin-bottom: 20px; padding-top: 30px;}.landing #main-title { font-size: 7em;}.marketing { font-size: 2.2em;}.section { display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin-bottom: 20px;}.last-container { background-color: #e6e6e6;}.section .large-subtitle { font-size: 4em;}.responsive { width: 100%; height: auto;}.responsive-companies { width: 40%; height: auto; padding: 50px 0 20px 0;}/* -- footer -- */.site-footer .site-map { padding-right: 40px;}.site-footer .site-map li:first-child { text-transform: uppercase; color: grey; font-weight: 900;}.site-footer .logo { width: 30%; margin: 0;}.site-footer .main { display: flex; justify-content: flex-start; font-size: 1.5em;}.site-footer .bottom { display: flex; flex-direction: row;}.site-footer .links { color: grey; font-weight: 900; font-size: 2em; justify-content: space-around;}.site-footer .change-language { justify-content: space-around; align-items: center; width: 60%; margin: 0 auto;}.site-footer .language { color: grey; font-size: 2em;}.site-footer .social-icons { display: flex; justify-content: space-around; font-size: 3em; width: 40%; margin: 0 auto; color: grey;}img.flag { width: 30px;}/* ----------- Mobile Screens ----------- *//*@media only screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) { body { background-color: blue; }}*//* ----------- Tablet Screens ----------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { body { background-color: blue; } .company-logos { display: flex; flex-direction: row; flex-wrap: wrap; } .company-logo { flex-basis: 45%; }}/* ----------- Desktop/Laptop Screens ----------- */@media screen and (min-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { body { background-color: red; } .company-logos { display: flex; flex-direction: row; flex-wrap: wrap; } .company-logo { flex-basis: 30%; } .navbar .top-menu-hamburger { display: none; } .navbar .top-menu-links { visibility: visible; } .navbar .link-list { display: flex; flex-direction: row; flex-wrap: wrap; }}<!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, maximum-scale=1.0, user-scalable=no" /><link rel="stylesheet" type="text/css" href="./stylesheets/style.css"><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"><script src="https://use.fontawesome.com/1fb0eb3889.js"></script><title>Where work happens | Slack</title></head><body><nav class="navbar"><div class="container"><div><img class="logo" src="https://www.seeklogo.net/wp-content/uploads/2015/09/slack-logo-vector-download.jpg" alt="slack_logo"></div><div class="top-menu-links"><ul class="link-list"><li><a href="#">Why Slack?</a></li><li><a href="#">Pricing</a></li><li><a href="#">About Us</a></li><li><a href="#">Your Workspaces</a></li></ul></div><div class="top-menu-hamburger"><i class="fa fa-bars fa-3x" aria-hidden="true"></i></div></div></nav><header class="landing container"><h1 id="main-title">Where Work Happens</h1><p class="marketing">When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.</p><button class="btn btn-main">GET STARTED</button><p>Already using Slack?<a href="#">Sign in</a></p><br><br><img class="responsive" src="https://www.sherweb.com/blog/wp-content/uploads/Things-You-Should-Know-About-Microsoft-Teams-Banner.jpg" alt="home_work_happening"></header><main><div class="last-container"><div class="section container"><h2 class="large-subtitle">You´re in good company</h2><p class="marketing">Millions of people around the world have already made Slack the place where their work happens.</p><button class="btn btn-second">DISCOVER WHY</button><div class="company-logos"><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div><div class="company-logo"><img class="responsive-companies" src="https://www.freelogodesign.org/img/logo-ex-4.png" alt=""></div></div></div></div><div class="section container"><h2 class="large-subtitle">Try it for free</h2><p>Already using Slack?<a href="">Sign in</a></p><button class="btn btn-main">GET STARTED</button></div></main><footer class="site-footer"><img class="logo" src="./images/iso-slack.png" alt=""><div class="main container"><div><ul class="site-map"><li>Company</li><li>About Us</li><li>Careers</li><li>Blog</li><li>Press</li><li>Brand Guidelines</li></ul><ul class="site-map"><li>Resources</li><li>Download</li><li>Help Center</li><li>Guides</li><li>Events</li><li>App Directory</li><li>API</li></ul></div><div><ul class="site-map"><li>Product</li><li>Why Slack?</li><li>Enterprise</li><li>Customer Stories</li><li>Pricing</li><li>Security</li></ul><ul class="site-map"><li>Extras</li><li>Podcast</li><li>Slack Shop</li><li>Slack at Work</li><li>Slack Fund</li></ul></div></div><div class="last-container"><div class="container"><ul class="bottom links"><li>Status</li><li>Privacy & Terms</li><li>Contact Us</li></ul><div class="bottom change-language"><div><img class="flag" src="./images/us-flag.png" alt=""></div><p class="language">English (US)<i class="fa fa-chevron-down" aria-hidden="true"></i></p></div><div class="social-icons"><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i><i class="fa fa-youtube-play" aria-hidden="true"></i></div></div></div></footer></body></html>