Arranging two divs to appear side by side, but they are mysteriously aligning in a diagonal pattern

I'm facing an issue with my navbar's divs not displaying side by side when set to display inline. Here is the HTML code snippet:

<!--Nav starts here-->
    <nav class="navbar">

        <div class="navbar-item-set">
            <div class="navbar-item">
                <a href="index.html" class="navbar-text">
                    <img src="images/sad_robot.png" alt="" width="45" height="45"/>
                    <br>    
                    ID2 Games
                </a> 
            </div>

            <div class="navbar-item">
                <a href="index.html" class="navbar-text">
                    <img src="images/sad_robot.png" alt="" width="45" height="45"/>
                    <br>
                    Fizz + Hummer
                </a>
            </div>
        </div>

    </nav>
<!--Nav ends here-->

Here is the CSS that I have used:

.navbar{
    height: 80px;
    text-align: center;
    font-size: 1.7rem;
    background-color: black;
}

.navbar-item-set{
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navbar-item{
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    color: white;
}

I am puzzled as to why this strange layout behavior is occurring. Can anyone help me figure out the cause?

Answer №1

Modify

.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}

Into

.navbar-item{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;

}

Answer №2

One solution is to eliminate the <br/> tags from the HTML code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods are available to create a transition animation for an HTML 5 banner on iOS devices?

I need assistance with animating an HTML5 banner to transition vertically onto the screen in my app demo. After a prompt that triggers a server callback, the banner should smoothly move down from the top of the screen. The animation I am aiming for is simi ...

Media query causing CSS display:none to malfunction

I'm currently working on making my website responsive, and I have a specific requirement where I need to hide an anchor when the screen size is under 850px. The code snippet I have is as follows: My goal is to display the first anchor (#tryitnow) by ...

HTML: Enhancing User Experience by Updating Page Content Dynamically

Looking for assistance with creating HTML code that will dynamically generate a table on the same page after a user submits a form. Rather than redirecting to a new page with the output values, I want the results to display at the bottom of the current p ...

Issue encountered during Python web scraping: TypeError: attempting to concatenate a string and a list

Despite my extensive research on this particular error, I am still struggling to find a solution. My current project involves web scraping a website using Python and attempting to navigate to other websites through the href links provided. years_code=[&apo ...

Retrieving selected options from a jQuery mobile multiselect for database storage

I'm currently working on extracting values from a select list in a jQuery mobile application. Here's the markup for my select element: <div data-role="fieldcontain"> <label for="stuff" class="select">Stuff:</label ...

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

JavaScript will continue to process the submit to the server even after validation has been completed

My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...

Explore the possibility of utilizing Excel VBA to locate images from websites and seamlessly import them into

Right now, my main goal is to browse an open webpage in search of multiple png images and then import them into various cells within a tab on my Excel workbook. The current macro I have takes me through the webpage where I can see which pictures are displ ...

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

I'm currently working on a to-do list application using basic JavaScript. One issue I'm facing is saving the checked status of the checkbox input element and displaying it again after the page is refreshed. Since I'm still learning JavaScrip ...

Load the div iframe when it is clicked

I'm looking for a way to optimize the loading of div elements on my website. Currently, when the page is loaded, all divs are also loaded but remain hidden until clicked. Is there a method to delay loading the content of a specific div until it's ...

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

Instructions on using $.post in jquery to sude uploaded file to a php file for processing

Is there a way to upload photos asynchronously using $.post without relying on .serializeArray()? I want to send a form, containing an upload file, to a PHP processing file. Any suggestions? HTML: <form action="upload1.php" method="post" id="usrform" ...

bourbon neat quadrilateral layout

Attempting to revamp someone else's messy, yet effective, CSS3 template into a more organized format. The transition to bourbon/neat has been smooth, but I'm facing a roadblock when it comes to creating a responsive image grid. <section class ...

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

Mobile device causing issues with sticky footer functionality

Can anyone help me troubleshoot an issue with my sticky/floating bottom footer on a calorie calculator? It works fine on desktop but not on mobile. Any ideas what might be causing the problem? HTML: <footer class="footer"> <div class="summar ...

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Dear Fellow Coders, Could anyone lend a hand? I encountered this issue on my website after uploading it to my FTP: "Resource interpreted as Stylesheet but transferred with MIME type text/plain" </head> <body> <div class= "navbar navbar ...

create visual content on a webpage

I am looking to showcase this image on a webpage with rectangles acting as a drop-down menu. Any creative suggestions on achieving this without resorting to using background images with CSS? ...