I'm struggling to center my navigation bar and adjust its size properly, causing the page to overflow

I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizontally. Can anyone provide assistance?

My Code:

body {
    background-color: black;
    width: 100vw;
    height: 100vh;
    display: inline block;
}

h1 {
    font-family: 'Anton', sans-serif;
    color: white;
    font-size: 108px;
    text-align: center;
}

div {
    width: 2000px;
    height: 500px;
    display: inline block;
}
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="KinoWorld homepage" content="html/css file">
        <meta name="viewport" content="width=device-width, initial-scale=1">

         <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Stuff</h1>
        <div class="search">
            <input type="text" placeholder="Search..">
        </div>
    </body>
</html>

Answer №1

When you set the body width to 100vw, it doesn't necessarily restrict child elements to 100vw. To prevent overflow, consider adding overflow-x: hidden to the body or apply appropriate styling directly to the child elements.

For the div element, it's generally advisable to avoid using pixel widths. However, if necessary, setting a max-width: 100%; will help prevent overflowing its parent container. Additionally, there is a typo in display: inline block;, which should be written as display: inline-block;. While it's not required to make this element an inline-block, keeping it as a block level element should suffice.

By default, the body will inherit the 100vw property. You can set it as a max-width value, especially if it's within a frame, but this step is often unnecessary.

If you want a page to always occupy the full height regardless of content, consider setting min-height: 100vh, rather than restricting the total height to 100vh.

An easy way to center an inline or inline-block element like your search input is to add text-align: center; on the parent element. For better semantics, use <input type="search"> for search form elements.

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

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

A Guide to Modifying Background Image Attribute using JavaScript

I am currently in the process of changing an attribute of a JavaScript variable from url("../images/video.png") (as declared in the CSS) to url("../images/pause.png") using this line of code: fullscreenPlayPauseButton.style.backgroundImage = "url("../imag ...

The JQuery and Javascript code is malfunctioning in Internet Explorer version 6 and later

Can someone please assist me in troubleshooting why this code works perfectly in Chrome and FF, but does not continually update in IE6 & 8? $(document).ready(function () { window.setInterval(function () { $('div').each(func ...

Updating Github pages requires clearing the cache first

As I work on my first website using GitHub pages, I've noticed that it can be frustrating to constantly clear the cache or open an incognito window whenever I add something new. I'm thinking about incorporating Jekyll into my workflow so I can t ...

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

Are there any additional dependencies required for Orbitdb to function properly?

When setting up Orbitdb to work with IPFS, it seems that there may be additional dependencies required that are not explicitly stated anywhere. I attempted to create a basic key-value database following the documentation: orbit.js const IPFS = require(&qu ...

Utilize BootStrap framework to embed Twitch player, ensuring it fills the entire width of its parent element

I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

Utilizing the powerful search capabilities of ElasticSearch within the robust Express

Currently, I am looking to develop an application and API that will primarily retrieve a certain resource. After hearing about the capabilities of Nodejs and ElasticSearch, and having some knowledge of Nodejs and Express framework, I am eager to integrat ...

Encountering difficulty when trying to initiate a new project using the Nest CLI

Currently, I am using a tutorial from here to assist me in creating a Nest project. To start off, I have successfully installed the Nest CLI by executing this command: npm i -g @nestjs/cli https://i.stack.imgur.com/3aVd1.png To confirm the installation, ...

Get the PDF in a mobile app using HTML5 and Javascript

For my HTML5/JavaScript-based mobile application, I am in need of implementing a feature that enables users to download a PDF file. The PDF file will be provided to me as a Base64 encoded byte stream. How can I allow users to initiate the download proces ...

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

What is the significance of the error message '[WDS] Disconnected!' in the context of using webpack and Vue.js?

Currently, I am engaged in a Django project that utilizes Vue.js for the frontend. Whenever I refresh the page, I encounter the "[WDS] Disconnected!" error. Despite the website's full functionality and absence of issues, this error appears every time ...

Finding matches across two collections in MongoDB with conditions applied

I am trying to perform a left antijoin on these two sets. I'm looking for all users in the 'IT' department who have not participated in a meeting with an endAt time > 175, either as a creator or receiver. Essentially, those who haven&apo ...

Using Jquery to dynamically add or remove a class based on scrolling behavior

Can someone help me with identifying the position of an element so that when the user scrolls to it and it appears on the screen, an icon can be highlighted? Currently, the script I am using adds the class too early, closer to the bottom of the block. I w ...

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

Handling Errors: Communicating with the Frontend

I'm facing a challenge with error handling in my authentication API calls. Whenever I trigger the 500 status from Express, my frontend (using Vue) only displays the message Request failed with status code 500 instead of something more informative like ...

Error: Trying to destroy a property that does not exist

I need assistance with deleting a product in my NODE JS application, and here is the relevant code snippet: exports.postEditProduct = (req, res, next) => { // working fine so far const prodId = req.body.productId; const updatedTitle = req.body.title ...