Nav bar link spacing

1

Hey everyone, in my newness I am at a loss as tightening up my nav bar link. id like them to be as far left as possible and tighter spacing maybe 1/4 of the bar or so?

what am i missing?

thanks
Justin

https://codepen.io/JRiley32/pen/OZLPRr?editors=0100

2

thats bootstrap 4 css
.navbar {position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; //thats where spaces come from
padding: 0.5rem 1rem;
}

helpful links:


3

Instead of <div class="navbar></div>" try using a semantic element like <navbar class="mr-auto"></navbar> then in your CSS you can do

margin-right: auto !important

This will pull the links to the left in Bootstrap 4.

Hope this helps.

4

what do you mean by that’s bootstrap4? I mean i know what bootstrap 4 is. Is there something different about my code?

thank you both!

5

i meant “that is bs4 css” showing a part of actual bs4 css below ,and adding a note to the property which causes spaces,
.navbar( navbar class) has display: flex by default

try

.navbar{
justify-content: flex-start;
}

didnt want to ruin the party :slight_smile:
is that what you wanted to see?

6

Afternoon sir,

Bootstraps can be great, but sometimes I find it can get in the way. So some old school CSS can do the trick. See the revised HTML and CSS below. You can tweek or add to it. I also center the main content, but style as you need.

<html>      
  <head>
  <title>Riley Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
  <header></header>
    <div class="my-navbar">
      <h2>Justin Riley</h2>
      <a href="#about">About Me</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </div>
  <body>
    <div class="main-container">
      <div class="about sections">
        <h4>About me!</h4>
    <p>For the past 14 years I have persued my dream of working in the culinary field. Now it is time to move on and I am exploring web development and Cisco networking. I've lived in Arizona all my life and enjoy my family, the outdoors, and Brazilian Jiu-Jitsu</p>
    </div>
    <div class="project sections">
      <h4>Current and ever expanding portfolio!</h4>
    </div>
    <div class="contact sections">
      <h4>Contact</h4>
      <p>Please reach out! I dont have much social media but check out what I do have.</p>
    </div>
  </div>
</body>
  <footer class="media-link">
    <p>Find my social media here.</p>
    <a href="">Linkedin</a>
    <a href="">GitHub</a>
  
  </footer>
</html

html, body {
  padding: 0;
  margin: 0;
}
.my-navbar{
  padding: 16px 0 16px 16px;
  background: linear-gradient(to right, #485868, #d7e3f7);
  position: fixed;
  top: 0;
  width: 100%;
}
.my-navbar h2, .my-navbar a {
  color: #000;
  display: inline-block;
  padding-right: 16px;
  text-decoration: none;
}
.main-container {
  padding: 0 90px;
}
.sections {
  font-family: "arial";
 }
.sections h4 {
  text-align: center;
  font-family: "Calibri";
}
.about {
  margin-top: 90px;
}
.contact {
  text-align: center;
}
.media-link {
  text-align: center;
}
.media-link a {
  display: block;
  text-decoration: none;
}

Best regards

7

Anne,
your first answer was perfect. it just confused me, i thought maybe I was mixing codes and that was the issue with my bar. when you mentioned it being bootstrap it confused me.

thank you for the links.
Justin