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

Dealing with cross-origin AJAX posting in Node.js处理Node.js中的

My app.js contains the following handler for POST requests: app.all('/', function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); app.opt ...

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

I attempted to use the window.screen.width method, but it appears that the script only runs once (upon page load). I am seeking a way for the code to run continuously. Below is my JavaScript snippet: var textinSelected = document.getElementById("se ...

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

"Execution of the console.log statement occurs following the completion of the request handling

When I have a piece of middleware that responds if no token is found, why does the console.log line still run after the request is responded to? I always believed that the res.json call would "end" the middleware. Any insights on this behavior would be g ...

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

Runs tasks asynchronously in a sequential manner

I am attempting to run two functions asynchronously in series using node.JS, but I am struggling with the implementation. Currently, my code looks like this: Function 1: function search(client_id, callback) { clientRedis.keys('director:*', ...

New messages are revealed as the chat box scrolls down

Whenever a user opens the chatbox or types a message, I want the scroll bar to automatically move down to show the most recent messages. I came across a solution that seems like it will do the trick: The issue is that despite implementing the provided cod ...

Which specific file do I need to update for Socket.io configuration when working with Express?

I have organized my app skeleton using express-generator, but I am facing an issue with setting up the socket.io code because my server and routes are in separate files. Most tutorials have everything in one file. The contents of app.js: var routes = req ...

Ways to eliminate the existing image during an image upload process

When a user decides to change their profile picture, I want the link in the database to be updated and the new image moved to the upload folder. The code should also remove the previous image associated with that specific user from the upload folder. The ...

Annoying AngularJS Scrolling Problem

I am facing an issue with a Container that loads multiple views <md-content flex id="content"> <div ng-view></div> </md-content> One of the loaded views has the following structure: <div layout="column" id="selection-whit ...

Initiate the node.js server automatically upon Windows 8 startup

Seeking advice on setting up a node.js server to run automatically on startup in Windows. Additionally, I want to launch a standalone application after the server starts. Any recommendations on the most efficient way to achieve this? ...

The Node server is mistakenly displaying my HTML file instead of loading the necessary Bootstrap CSS and JavaScript files

My attempt to locally serve bootstrap via an npm-installed package is not going as expected. Despite my efforts, Node seems to be serving my html file instead of the necessary bootstrap CSS and JS files, leaving me puzzled. To ensure accessibility, I have ...

Trouble with CSS3 Menu Layout and Gradient Display Issues

My task is to replicate this menu: I'm having trouble creating the gradient. Completed Why can't I see it in my code? http://jsfiddle.net/Vtr6d/ Here's what I currently have: CSS: .mainOptions{ float:left; margin:0 20px 0 20px; ...

What is the best way to create a line break in a React caption without it being visible to the user?

Is there a way to add a break or invisible character between "we make it simple" and "to create software" in order to match the Figma design for the React web app caption? https://i.stack.imgur.com/Z4rpt.png https://i.stack.imgur.com/06mMO.jpg https://i.s ...

Is it possible to retrieve the createdAt timestamp without displaying the 'GMT+0000 (Coordinated Universal Time)'?

After conducting an extensive search, I have yet to find a satisfactory answer. My goal is to configure it without including the CUT time. {name: "Registered:", value: `${user.createdAt}`}, {name: "Joined:", value: `${message.guild.joinedAt}`} Presently, ...

positioning a window.confirm dialog box in the center of the screen

I'm currently facing an issue with a dialog box that I have implemented successfully. However, I can't seem to get it centered on the page: <Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handle ...

Added a fresh if statement to a nodeJS function that is not functioning properly in an otherwise functional function

I have a functional Google Cloud function that receives JSON data via webhook and sends it to a third-party platform. It was operational until I made some modifications by adding an if statement, which has caused syntax errors. I need assistance with the ...

What is the best way to add a class to the initial HTML element in my specific scenario?

Currently utilizing the angular framework in my application. Desire to assign a specific class to only the initial element within my ng-repeat iteration. <div class='initialOnly' ng-repeat = 'task in tasks'>{{task.chore}}</di ...

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

The integration of single page applications and <form> elements is a powerful combination in web development

Is there still value in using a <form> element over a <div> element when developing single page applications? I understand the purpose of the <form> element for traditional form submissions with a full page reload, but in the context of ...