Alignment and positioning error in HTML and CSS ( very new to HTML )

I know starting with CSS can be quite challenging especially when you try to position elements the way you want.

The problem with your navbar jumping around lies primarily in the css part where you change the hover state of the "cn" class:

.cn:hover {
      color: black;
      font-weight: bold;
      background-color: white;
      height: 35px;
      width: 90px;
      border: none;
      border-radius: 10px;
      transition: all 1s;
      display: inline;
      margin-right: 0;
}

You should try to change the style of an element as little as possible just for the hover state, especially when it comes to positioning options like display, margin, padding, width, height and so on.

But first, start by optimising your HTML. Your navbar currently looks like this.

<nav>
    <h2>LAN Network Provider</h2>

    <button class="cn" id="hm">Home</button>
    <button class="cn">About</button>
    <button class="cn">Services</button>
    <button class="cn">Contact</button>

    <button id="lg" class="bt">Login</button>
    <button id="rg" class="bt">Register</button>
</nav>

While this would technically work, it is usually good practice to keep
navbar elements, that are meant to be just a link to another page, as
an HTML link element "<a></a>". Try not to use the button element
to much while they are primarily used along form elements. They are
meant to be used for more complex user interactions with your site,
like sending or receiving data or opening a popup window. If you are
working with JavaScript you technically don’t need button elements at
all because you can listen to events like clicking or dragging on any
element.

In your case I would format the html like this:

<nav>
    <h2>LAN Network Provider</h2>

        <a class="cn" id="hm">Home<a/>
        <a class="cn">About</a>
        <a class="cn">Services</a>
        <a class="cn">Contact</a>

        <button id="lg" class="bt">Login</button>
        <button id="rg" class="bt">Register</button>
</nav>

This should already remove most of the content jumping around, but there is still some room for improvements. So let’s get back to your css:

Because you probably don’t want to change the positioning or size of the navbar links when hovering over them you should put allot of the css option from .cn:hover into .cn as all styles in .cn will also be applied to the hover state if not overwritten in .cn:hover.

Allot of problems are often caused by the display option. Changing the display option on hover will most definitely cause you some trouble.

If you want to get your positioning perfect you should learn about css flex.

To improve the positioning of your navbar elements we will remove the display option from all of your navbar elements. Instead we will control the positioning from the parent element (thats the ).

To do that, we will add the following code to your css:

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

• display: flex will position your elements one after another in a certain direction
• align-items: center will center all of your elements on a horizontal line
• justify-content: space-between will space the elements evenly between the start and end of the nav container

If you want try out the different options of css flex you can play with it in your browsers developer tools where you can change the options directly in the browser.

To leave some space for the text inside your hover background just add some padding (inner spacing) to your navbar links:

.cn {
    color: white;
    border: none;
    background-color: rgb(255, 255, 255, 0);
    cursor: pointer;
    padding: 10px
}

using padding is usually better than trying to create whitespace by using width and height as it will automatically push your content more into the center.

Some last things I want to mention:

• If you want to keep a different spacing between your login and register button than the automatically calculated one by flex, just add a div around them and flex will treat the div together with everything inside it as one element.
• Try to always use class instead of id, so you can reuse your styles for other components
• Use more descriptive names for your classes: This will help you to better keep track of what you are actually styling. E.g. use nav-link instead of cn

I hope I could help you on your journey learning html and css. It might take sometime but at the end you will be able to create amazing things.

Have fun and a great day 🙌