Header CSS styling spacing
I have a fairly simple header that I can get to look the way I want though I found that for my RWD to allow the header to work anywhere and to get the look for the whole page that want a more organized look to webpage. I am now trying the grid-template with the flexbox within the grid tracks and my header doesn’t like when I want the gap between the links. I created a js fiddle https://jsfiddle.net/Arandolph01/vp8xnrmL/2/ I idea is the best Responsive Web Design and I keep getting the logo and the the image disappearing almost completely when I change the size of the screen. I have used the right metrics and auto where it says along with latest layouts so appreciate filling me in.
Update
.nav_menu a { margin: 1em 3.7em; } body { background-image: url(https://i.imgur.com/sCfeeeY.png),url(https://i.imgur.com/sCfeeeY.png) ; background-position: top 1em right 1em, bottom 1em left 1em; background-repeat: no-repeat; } .row { flex: 2 auto; grid-column: 1 30em; display: flex; margin: auto; } .active { margin: 1em; } .fullwebpage .section { display: grid; grid-template-rows: 1fr 1fr auto auto 1fr 1fr; grid-template-columns: minmax(40em, 25%) 1fr; grid-column: 1; flex: 0 1 28em; } .sectionheader { display: flex; flex: 8 auto; grid-row: auto 1; width: 100%; margin: 1em; margin-right: 3em; } .sectionfirst { padding-top: 5em; } .nav_menu { margin-right: 4em; } .nav_menu { float: left; justify-content: space-around; text-decoration: none; font-family: Verdana; font-weight: bold; display: flex; z-index: 1; } .wrap { display: inline-flex; width:100%; margin-top:2em; } .wrap a { display: flex; flex: 3 auto; flex-flow: row; grid-row: 1; float: start; color: black; text-decoration: none; font-size: 17px; } .wrap#gsbutton { padding-top: .5em; padding-right: 0; padding-left: 0; margin-right: 3em; margin-left: 0em; }<!DOCTYPE html> <html lang="en"> <head> <title>Frontend Challenge Developer Website</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="stylesheet" type="text/css" href="attributes.css"> </head> <body> <section> <section class="row header" id="sectionheader"> <!-- page bar header navigation tabs --> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index.html"> <img src="https://i.imgur.com/4kctnTg.png"></img> </a> </div> <nav class="nav_menu"> <a class="active" href=""><!--index.html-->Home</a> <a class="active" id="pricingheader" href=""><!--pricing.html-->Pricing</a> <a class="active" href=""><!--products.html-->Products</a> <a class="active" href=""><!--aboutus.html-->About Us</a> <a class="active" href=""><!--community-->Community</a> </nav> <a class="gsbutton" id="gsbutton" href=""> <img src="https://i.imgur.com/XZY4xX0.png" alt=""> </a> </div> </div> </section> </body> </html>I want the section to be spaced by 1-3em.
Set margin on the child element instead of padding on your flex item.
.nav_menu a { margin: 0 1em; } Checkout Example
All you had to do was add a bit of margin to the active class.
body { background-image: url(https://i.imgur.com/sCfeeeY.png), url(https://i.imgur.com/sCfeeeY.png); background-position: top 1em right 1em, bottom 1em left 1em; background-repeat: no-repeat; } .a { padding: 2px 0px; text-decoration: none; font-size: 17px; font-family: Verdana; font-weight: bold; color: black; justify-content: space-around; } .row { flex: 2 auto; grid-column: 1 10em; grid-row: auto; display: flex; } .fullwebpage { display: grid; grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr auto; grid-column: 1; grid-gap: 5em; } .sectionheader { display: flex; flex: 8 auto; grid-row: auto 1; width: 100%; margin: 1em; margin-right: 3em; } .section_bg .head_bg a:active { color: black; } .footer a:active { color: white; } .table-row { width: 100%; display: flex; } .topfooterbanner { width: 100%; background-color: orange; height: 100%; bottom: 0em; } .nav_menu { float: left; justify-content: space-around; text-decoration: none; font-family: Verdana; font-weight: bold; display: flex; z-index: 1; } .wrap { display: inline-flex; /* float: left; */ /* flex: 3 auto; */ width: 100%; /* margin-left: 10em; */ margin-top: 2em; /* padding: 1em; */ /* text-align: center; */ } .wrap a { display: flex; flex: 3 auto; flex-flow: row; grid-row: 1; float: start; color: black; text-decoration: none; font-size: 17px; } .active { margin: 5px; }<section class="row header" id="sectionheader"> <!-- page bar header navigation tabs --> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index.html"> <img src="https://i.imgur.com/4kctnTg.png"></img> </a> </div> <nav class="nav_menu"> <a class="active" href="index.html">Home</a> <a class="active" id="pricingheader" href="pricing.html">Pricing</a> <a class="active" href="product.html">Products</a> <a class="active" href="about.html">About Us</a> <a class="active" href="community.html">Community</a> </nav> <a class="gsbutton" id="gsbutton" href="pricing.html"><img src="https://i.imgur.com/jfNTTt4.png" alt=""></a> </div> </div> </section>
