Solution 1 :

You need to define a larger width for that container. In your css, change the class div from width: 200px; to width: 100%;

enter image description here

Solution 2 :

It is because on your website you set fixed width of 200px to div element. Remove that and the buttons will go into one line;

Solution 3 :

Try to keep code nice and tidy, styling on external file or at least seperated.
When you click on “Leave the review” your navbar looks like you wish.

I copied code form “Leave the review” page:

<div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:[email protected]'"
        target="_blank">Contact us</button>
</div>

Solution 4 :

like I said before, keep code separated 🙂
Imagine, if you want different color to your menu, so you would have to change color in many places. Now you have all in one place and you can check other people syggestions about settings.

<nav id="navbar" style="text-align:center">
    <div class="div">
        <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
        <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
        <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
        <button class="navbutton" onclick="window.location.href='mailto:[email protected]'" target="_blank">Contact us</button>
    </div>
</nav>
<style>
    .navbutton {
  background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;
}
</style>

Your website:

Problem :

I’m not sure if this is a problem with this code or the surrounding code. As you can see, centering these buttons works perfectly when you run the code snippet.

<nav id="navbar" style="text-align:center">
    <div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'"style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:[email protected]'" target="_blank" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Contact us</button>
    </div>
</nav>

For some reason, on my website it just turns it into a pile of buttons.

Comments

Comment posted by LemmyX

Hmm, I’m not quite sure what you mean. The only thing with a “width” element is the products. I changed that, but it didn’t do anything.

Comment posted by Painguin

Try this: Under your

Comment posted by LemmyX

Wait, you mean id, or are you talking about something else?

Comment posted by LemmyX

That’s what I had been doing anyway. For some reason, my hosting service won’t let me connect more than one CSS document per HTML page, so by doing that, all the styling goes away, plus it doesn’t really center it at all.

Comment posted by konrad

ok, I suggest keep all css in