Navigation bar issues- hover colours not aligning

[Edrol97]

So the navigation bar I have is great but I'm wondering about the gap between the options either side. How would I extend the individual <a> areas so that they align with the selected item? Hope this makes sense.

 

[Johna]

Can you show your HTML and CSS?

 

[Edrol97]

Can you show your HTML and CSS?

Sure here's both. I'm liking to two css styles in my html but the relevant item from the other css file I have taken out and pasted in to the code below.

@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand2-Regular.otf);
}
.title_text5 {
  font-size: 28pt;
}
header {
  width: 100%;
  fill: black;
  font-family: "Eliot Lord", sans-serif;
}
#sunnavigationbar {
  font-size: 3dvw;
}

#sunnavigationbar :link {
  font-size: 3.6dvw;
}
#sunnavigationbar {
  left: 100%;
}

header {
  width: 100%;
  fill: black;
  font-family: "Times New Roman", Times, serif;
}
#sunnavigationbar {
  background-color: black;
  padding: 10px 10px;
  font-family: "Times New Roman", Times, serif;
}
.header1 {
  font-family: Eliot Lord;
  font-size: 3dvw;
}
a:active {
  color: lightgrey;
}
a {
  color: white;
}
#sunnavigationbar :hover {
  background-color: #3c3c3c;
  font-weight: 0;
}
#sunnavigationbar a:hover {
  padding: 10px 10px 10px;
  color: white;
}
#sunnavigationbar {
  background-color: black;
  font-family: "Times New Roman", Times, serif;
}
.header1 {
  font-family: Eliot Lord;
  font-size: 3dvw;
}
#sunnavigationbar a {
  font-family: "Times New Roman", Times, serif;
  color: white;
  text-decoration: none;
  padding: 10px 10px 10px;
}
header img {
  max-width: 100%;
  height: auto;
}
body::-webkit-scrollbar {
  width: 1em round;
  overflow: scroll;
  color: #000;
}
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-weight: 900;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Mouse%20cursor.png),
    url(img/background/cursors/pointer1.png), pointer;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
body::-webkit-scrollbar {
  width: 2em round;
}
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px black;
}
body::-webkit-scrollbar-thumb {
  background-color: black;
  outline: 1px solid black;
}
footer {
  bottom: 0%;
  width: 100%;
  background-color: #000;
}
.links {
  width: 100%;
  height: 100%;
}
#roche {
  background-color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.footer-container,
.footer1,
footer a {
  font-family: "Times New Roman", Times, serif;
  font-weight: 100;
  font-size: 1.3dvw;
  color: white;
}
footer a:hover {
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
}
.footer-container,
.footer1,
footer a {
  background-color: black;
  fill: black;
}
footer p {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3dvw;
}
a,
link,
:link {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3dvw;
}
.column2 {
  background-color: black;
}
.fa-facebook {
  background: #2e73b7;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-twitter {
  background: #429bd6;
  color: white;
  height: 40px;
  width: 40px;
}
.fa-instagram {
  background: #ffffff;
  height: 40px;
  width: 40px;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  padding-bottom: 20px;
  bottom: 100px;
  float: right;
}
.fa:hover {
  opacity: 0.7;
}
.responsive {
  font-size: 2dvh;
}
.content-box p {
  font-size: 2dvh;
}
.content-box {
  padding-top: 30px;
  columns: 3 auto;
  max-width: 1400px;
  border-left: 0px;
  border-right: 0px;
  border-inline-start: #000;
  column-gap: 40px;
  column-rule: 0px;
}
footer .row a {
  width: 50%;
  display: block;
  text-align: center;
}
footer {
  float: left;
  width: 100%;
  position: relative;
  font-family: "Times New Roman", Times, serif;
}
.column,
#column {
  float: left;
  width: 300px;
  padding: 0;
}
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }
  .title_text {
    font-size: 28px;
  }
  .title_text1 {
    font-size: 28px;
  }
  .title_text4 {
    font-size: 28px;
  }
  .title_text5 {
    font-size: 24px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Me, Me, Me</title>
    <link
      rel="icon"
      type="image/x-icon"
      href="img/background/Portrait.png"
    />
    <link rel="stylesheet" href="about_me.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body style="background-image: url(img/background/AboutMeBackground.png)">
    <a href="Bad_Times.html"
      ><img src="img/Bad%20Times%20logo%20horizontal.png" width="250px"
    /></a>
    <a href="https://procartoonists.org/profile/eliotlord/" target="_blank"
      ><img src="img/background/PCO_LogoBlack-2.png" style="float: right" width="200px"
    /></a>
    <div id="sunnavigationbar">
      <a href="Home.html">Hi</a>
      <a href="about_me.html" style="background-color: #3c3c3c;">Bio</a>
      <a href="Art.html">Show-Off</a>
      <a href="cv.html">The CV</a>
      <a href="Inspa.html">Inspa</a>
    </div>

    <div id="bobois">
      <div class="responsive">
        <div class="content-box">
          <img src="img/background/Portrait.png" width="200px" />

          <div class="title_text5">
            <span style="background-color: white">
              Hello, that's me above if you hadn't realised. I approach my work
              with dynamism but where did that all begin? Well I was born in
              1997 to a very political family. My mother is in the cohort of
              women who had their state pension age raised from 60 to 65 and is
              against this increase, and my dad was a police officer from when I
              was quite young.
            </span>
          </div>

          <div class="title_text5">
            <span style="background-color: white">
              There's no escaping politics! I'm the only one doing satire
              though. I've studied in two art schools and both have been amazing
              places to learn and hone my craft. The first was at Kingston
              School of Art where I did an art and design foundation and a fine
              art degree because I loved the place so much.
            </span>
          </div>

          <div class="title_text5">
            <span style="background-color: white">
              I then went on to Newcastle for an MFA (Master of Fine Arts) where
              I worked in the King Edward VII building, an incredible Edwardian
              building with arches and columns. Every day it felt as if I was
              walking into Hogwarts.
              <br /><br /><img
                src="img/background/King_Edward_VII_Building.jpg"
                width="200px"
              /><br />
              <br />

              See! I have been described as a prolific maker by former tutors
              and whether working with my laptop and wacom tablet or with good
              old fashioned pen and paper, my desktop is always cluttered with
              pens and pencils or psds and pngs.
            </span>
          </div>

          <div class="title_text5">
            <span style="background-color: white">
              Most artists have that chaotic tendency, right?! <br />I have down
              days when I don't do much but I'll always be thinking. Thinking
              about how to cover the latest calamity from the politicians be
              they Conservative or Labour and thinking what the result of the
              mess they've created will eventually be. <br />
              Another thing I consider in my artwork is impact on the most
              vulnerable from politicians. I'm autistic and so consider people
              with other disabilities in my artwork and think about the impact
              of government policy on them. If things don't work for the most
              vulnerable, they don't work for anyone. <br />
              I also think about attracting those who aren't interested in
              politics, because no matter what, they will be affected by it.
            </span>
          </div>

          <img src="img/background/PoliticsEverywhere.jpg" width="300px" />

          <div class="title_text5">
            <span style="background-color: white">
              The people I really love are cartoonists. It's an old craft
              starting in the 1750s with George Townshend (a politician by
              trade), then popularised by Gillray and Hannah Humphrey. Nowadays,
              the tradition of political cartooning, rinsing and taking the piss
              out of politicians is continued by cartoonists like Martin Rowson,
              Ben Jennings, and Ella Baron. There's always interest everyday.
              This is why I love the artform as well as making my own cartoons.
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- <script src="https://www.paypal.com/sdk/js?client-id=BAA-UxEfItp5Ddqx1XHFjUxi6W6JbsgSTZmv2pD5pXP065KG3rgcUZqbyHuUfS6WNNVhJvs7vEMhYgVD6g&components=hosted-buttons&disable-funding=venmo&currency=GBP"></script>
         <div id="paypal-container-QTAUM5KYEGC8G"></div>
         <script>
            paypal.HostedButtons({
              hostedButtonId: "QTAUM5KYEGC8G",
            }).render("#paypal-container-QTAUM5KYEGC8G")
         </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
        
         <br>
         <br>-->

    <footer style="background-color: black">
      <div class="socials">
        <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
        <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
        <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
      </div>
       <a href="Home.html"><div class="title_text3">&#169 Eliot Lord 2024</div></a>
       <br>
      
       <div class="column"><a href="Home.html"><p>Hi</p></a></div>
       <div class="column"><a href="about_me.html" style="font-weight: 900; text-decoration: underline;"><p>The Bio</p></a></div>
       <div class="column"><a href="Art.html"><p>Show-Off</p></a></div>
       <div class="column"><a href="Bad_Times.html"><p>Bad Times are Now</p></a></div>
       <div class="column"><a href="The_Pun.html"><p>The Pun</p></a></div>
       <div class="column"><a href="https://procartoonists.org/profile/eliotlord/" target="_blank"><p>Trust Me, I'm a Pro</p></a></div>
       <div class="column"><a href="Mail.html"><p>The Fail</p></a></div>
       <div class="column"><a href="cv.html"><p>The CV</p></a></div>
       <div class="column1"><a href="Bad_Times.html"><img src="img/background/Bad Times logo horizontal white colour.png" width="250px"></a></div>   
      
    </footer>
  </body>
</html>

 

[Johna]

Those gaps are caused by there being white spaces in between the links.
You could fix that by either putting all those links on the same line in the code without any spaces in between, or the more convenient way by giving the display: flex; property to the parent element.

 

[Edrol97]

Thanks John. This worked. Also hadn't looked at your website in the below link before. Really nice use of light in the photography!