Help with a Project I am Building

Hey guys,

I am working on and have been working on a project for my gamer profile. I am trying to build a website that displays information about my game handle, the games I play etc etc… I am having an issue with a few things and I believe them to be CSS related.

First: When I open the website onto a local browser, My navbar which is at the left to begin with on the home page, shifts slightly to the right on the about/contact page.

Second: My banner image seems to be shifting around as well even though I use only one stylesheet and the image seems to be centered on the latter two pages.

Third: Some of the text inside of the webpage is not lining up properly. I.E. the h2 text below the banner text.

Insight on these issues would be great. I’ve attached some codebytes of the HTML and CSS pages.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Yarr Matey this be my first Website</title>

    <link rel="stylesheet" type="text/css" href="./CSS/stylesheets.css">

</head>

<body>

    <nav id="navbar">

        <!-- this be the navigation bar-->

        <ul>

            <li id="button1"><a href="./index.html">Home</a></li>

            <li id="button2"><a href="./About.html">About</a></li>

            <li id="button3"><a href="./Contact.html">Contact</a></li>

        </ul>

    </nav>

    <div class="banner">

        <!-- This is the BANNER section-->

        <img src="Images/WEBlogoBUFF.svg" height="400" alt="branded logo">

          <div class="text">

            <h1><strong>Jack of MOST Games</strong></h1>

          </div>

    </div>

    <main>

        <!-- Introduction / Welcome part-->

        <h2>Welcome</h2>

        <p>Home of everything Buff4eyes, you have now stepped foot into the den of one of gamings most notorious nerds. Strap yourself in because what you see may make the eyes twitch. No pun intended. Viewer beware, I have a sailor's mouth so keep your children's ears covered. </p>

        <br/>

       

    </main>

</body>

</html>

~~~~~~~~CSS CODE~~~~~~~~~
body {

    font-family: Arial;

    background-color: rgb(43, 44, 44);

    margin: 0px;

}

#navbar li {

    display: inline;

    padding: 20px 10px;

    font-family: 'Franklin Gothic Medium';

   

}

#navbar a {

    text-decoration: none;

}

#navbar {

    position: fixed;

    background-color: rgb(143, 59, 59);

    width: 100%;

    display: flexbox;

    justify-content: center;

    align-items:center;

    z-index: 1;

    margin-top: 0px;

    margin-left: 0px;

    padding-top:5px;

    padding-bottom:5px;

    left: 0;

}

#button1:hover, #button2:hover, #button3:hover {

    cursor:grab;

    background-color:azure;

    border: 1px solid aqua;

    transition: all .3s ease 0s;

}

.banner {

    padding-left: 25%;

    height: 250 px;

    image-rendering: optimizeQuality;

    text-align: center;

    color: rgb(163, 163, 167);

    display: inline-block;

    justify-content:center;

}

.banner img {

    background-size: cover;  

    cursor:crosshair;

    align-items: center;

   }

   .banner .text {

    position: relative;

    text-align: bottom;

    z-index: 2;

     margin: 0 auto;

     left: 0;

     right: 0;

     top: 60%;

}

h2 {

    text-align: center;

    background-color: rgb(143, 59, 59);;

    color: rgb(255, 222, 35);

    padding: 20px ;

}

.about ul{

  list-style-type:none;

  color: lightseagreen;

}

.avatar img {

  height: 50px;

  width: 50px;

  border-radius: 75%;

  display:inline-block;

  vertical-align:middle;

  padding-bottom: 10px;

}

.form {

  text-align: center;

  font-display: inherit;

}

p {

    color: white;

}

article {

    color: white;

}

article a {

    color: lightgreen;

}

.form label {

    color: white;

}



I'm stumped so any help would be greatly appreciated. Please and thank you!!!!

Hey :slight_smile:

First: I tried everything to get the navbar more to the left but the only thing which worked for me was simply adding a class to the ul

 <ul class="right">

            <li id="button1"><a href="./index.html">Home</a></li>

            <li id="button2"><a href="./About.html">About</a></li>

            <li id="button3"><a href="./Contact.html">Contact</a></li>

</ul>

with the following CSS rule:

.right {
    position: relative;
    right: 30px;
}

I don’t know if that’s the most elegant solution but maybe it helps…

Second: Could you maybe either upload your banner image here or on a picture hosting website? It would be better to see the problem having the pic you use :wink:

Third: Unfortunately I don’t really get which text you mean which doesn’t line up well. The h2 text which you mention for example should be the Welcome but the Welcome lines up very good… Maybe you can make this more clear or show on a screenshot what you mean…

1 Like

Chris!

thank you so much for the reply. I’ve actually uploaded my project to github with all of its contents.

https://cmokbel1.github.io/Buff4eyes/

The live link is posted above and I’ll copy below the link to the contents of the webpage. Maybe this will help you see what i mean.

Thanks for sharing the content, it would just be a bit easier if you would create an extra folder for only this project on Github cause right now I see so many documents and don’t know which are the ones I need :sweat_smile:

However let’s look at your questions!

First: I already answered above.

Second: When I open the website, the banner image looks totally fine. I also resized the browser window and for me it looks fine…?

Third: I guess your problem is the text under the “Welcome”, right?
So I don’t know how you exactely you want to have it but if you just want to move it a bit away from the left side you could do this

p {
    margin: 0px 10px;
}

Or maybe you also want to center it

p {
    margin: 0px 10px;
    text-align: center;
}

Or you want something completely else? Then try to explain it :wink: