My text isn't aligning on the right in my table. Why?

January 15, 2022

I’m trying to align text and images in a table for my navbar. There are two columns.
The problem is that the text and the image on the left column (class "NavAccueil") are aligned on the left (at least it looks like it) but the texts on the right column ("NavWarp") are not aligned on the right of my table. I don’t know why. Here’s the code (It might be very bad, I’m new at this)

#BarreNavigation {
  position: sticky;
  top: 0;
  background-image: url("../Assets/Images/CounterStrike3.png");
  background-size: cover;
  background-position: top;
  width: 100%;
  max-height: fit-content;
  z-index: 1;
  margin: 0 auto;
  border-style: solid;
  border-color: #a58e188e;
  border-width: 0.5vh;
  border-radius: 1vh;
  text-align: center;
  font-size: 3.5vh;
  font-family: "Mono";
}

#BarreNavigation a {
  color: #ffffff;
  transition: text-shadow 250ms ease;
  text-shadow: 2px 2px 3px #000000;
  text-decoration: none;
  padding-left: 2vh;
  padding-right: 2vh;
}

#BarreNavigation a:hover {
  text-shadow: 2px 2px 3px #ff7300;
}

.NavAccueil {
  width: 40%;
  text-align: left;
  text-shadow: none;
  filter: drop-shadow(2px 2px 3px black);
  transition: filter 250ms ease;
}

.NavAccueil :hover {
  filter: drop-shadow(2px 2px 3px #ff7300)
}

.NavAccueilIcon {
  width: 4vh;
  vertical-align: -10%;
  padding-right: 1vh;
}

.NavWarp {
  width: 60%;
}

.NavWarpText {
  background-color: rgba(49, 39, 10, 0.411);
  border-radius: 0.5vh;
}

<div id="BarreNavigation">
  <table>
    <tr>
      <td class="NavAccueil">
        <a href="Index.htm"><img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil</a>
      </td>
      <td class="NavWarp">
        <a href="#Presentation" class="NavWarpText">Presentation</a>
        <a href="#ModesJeu" class="NavWarpText">Modes De Jeu</a>
        <a href="#Cartes" class="NavWarpText">Les Cartes</a>
      </td>
    </tr>
  </table>
</div>

Also, I’ve a problem where the text in the "boxes" on the right are like cut when the width they have is not enough so they get cut and one part of the text in the box stays on the top and the other one goes on the bottom of the navbar so the boxes are like cut.

Anyways, that’s another problem.
So if anybody knows how to align that text on right, I would be happy to learn from you.

>Solution :

table by default is only as wide as its content.

Add

table { table-layout: fixed; min-width: 100%; }

table { table-layout: fixed; min-width: 100%; }

#BarreNavigation {
  position: sticky;
  top: 0;
  background-image: url("../Assets/Images/CounterStrike3.png");
  background-size: cover;
  background-position: top;
  width: 100%;
  max-height: fit-content;
  z-index: 1;
  margin: 0 auto;
  border-style: solid;
  border-color: #a58e188e;
  border-width: 0.5vh;
  border-radius: 1vh;
  text-align: center;
  font-size: 3.5vh;
  font-family: "Mono";
}

#BarreNavigation a {
  color: #ffffff;
  transition: text-shadow 250ms ease;
  text-shadow: 2px 2px 3px #000000;
  text-decoration: none;
  padding-left: 2vh;
  padding-right: 2vh;
}

#BarreNavigation a:hover {
  text-shadow: 2px 2px 3px #ff7300;
}

.NavAccueil {
  width: 40%;
  text-align: left;
  text-shadow: none;
  filter: drop-shadow(2px 2px 3px black);
  transition: filter 250ms ease;
}

.NavAccueil :hover {
  filter: drop-shadow(2px 2px 3px #ff7300)
}

.NavAccueilIcon {
  width: 4vh;
  vertical-align: -10%;
  padding-right: 1vh;
}

.NavWarp {
  width: 60%;
}

.NavWarpText {
  background-color: rgba(49, 39, 10, 0.411);
  border-radius: 0.5vh;
}

<div id="BarreNavigation">
  <table>
    <tr>
      <td class="NavAccueil">
        <a href="Index.htm"><img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil</a>
      </td>
      <td class="NavWarp">
        <a href="#Presentation" class="NavWarpText">Presentation</a>
        <a href="#ModesJeu" class="NavWarpText">Modes De Jeu</a>
        <a href="#Cartes" class="NavWarpText">Les Cartes</a>
      </td>
    </tr>
  </table>
</div>