I’m trying to make a little web layout. What I have so far is

Question

0

Asked: June 7, 20262026-06-07T00:30:12+00:00 2026-06-07T00:30:12+00:00

I’m trying to make a little web layout. What I have so far is

0

I’m trying to make a little web layout. What I have so far is this.

I’m trying to get the buttons on the same horizontal line as the navigation bar. In other words, I want the “display date” button directly to the right of the “home” navigation button. I can’t change the margins on the buttons – it adjusts itself to the bottom border of the nav bar, as in, at a margin of 0 it’s directly under the nav bar’s bottom border (like you can see in the screenshot).

Sorry if the code is messy or hard to read, I’m at the very beginning level.

Here is the code for it –

<!DOCTYPE html>
<html>
    
    <head>
        <!-- *****CSS CODE START*****-->
        <style type="text/css">
            /*navigation bar*/
            ul {
                list-style-type:none;
                margin:50;
                padding:0;
            }
            a:link, a:visited {
                display:block;
                font-weight:bold;
                color:#dd731c;
                background-color:#473e36;
                width:120px;
                text-align:center;
                padding:4px;
                text-decoration:none;
                text-transform:uppercase;
            }
            a:hover, a:active {
                background-color:#bea792;
            }
            a:hover {
                color:black;
            }
            a:active {
                color:#dd731c;
            }
            /*button margins*/
            button.button1 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            button.button2 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            button.button3 {
                margin-top:0px;
                margin-bottom:10px;
                margin-right:50px;
                margin-left:200px;
            }
            /*line*/
            #middle hr.line {
                height: 1px;
                margin: 0 30px 5px 30px;
            }
            /*other*/
            body {
                background-color:#473e36;
            }
            h1 {
                color:orange;
                text-align:center;
            }
            p {
                font-family:"Times New Roman";
                font-size:20px;
            }
        </style>
        <!-- *****CSS CODE END***** -->
    </head>
    <!-- *****HTML CODE START***** -->
    
    <body>
        <h1>title</h1>
        <!-- line -->
        <hr class="line">
        <!-- navigation bar list -->
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#news">News</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
            <li>
                <a href="http://www.google.com">About</a>
            </li>
        </ul>
        <!-- buttons -->
        <button type="button" button class="button1" onclick="displayDate()">Display Date</button>
        <text id="demo">This is a paragraph.</text>
        <br />
        <button type="button" button class="button2" onclick="displayName()">Display Naaaame</button>
        <br />
        <button type="button" button class="button3" onclick="count()">count!</button>
        <text id="counter">0</text>
    </body>
    <!-- *****HTML CODE END***** -->




</html>
<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">
    var currentNum = 1;




    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }




    function displayName() {
        document.getElementById("demo").innerHTML = "jim";
    }




    function count() {
        document.getElementById("counter").innerHTML = currentNum;
        currentNum = ++currentNum;
    }
</script>
<!-- *****JavaScript CODE END***** -->