empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue will be an easy fix!

HTML:

<!DOCTYPE html>
<html>

<body>


<!--Logo + Social media and login + navbar + search bar-->
    <div class="login">
            <div class="container-fluid">
                <ul class="pull-right">
                    <li class="loginbutton"><a href="#">Log In</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#"></a></li>
                </ul>
                <ul class="pull-left">
                    <li><a href="#"><img class="twitter" src="#"></a></li>
                    <li><a href="#"><img class="facebook" src="#"></a></li>
                    <li class="pressreleases"><a href="#">Press</a></li>
                </ul>
            </div>
    </div>      

    <div class="logo">
        <div class="container-fluid">
                <a href="#"><img class="logo" src="#" border="0"></a>
        </div>
    </div>

    <div class="nav">
        <ul class="navbar">
            <li><a href="#">New</a></li>
            <li><a href="#">Popular</a></li>
            <li><a href="#">Database</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>

    <div class="searchbar">
        <div class="container-fluid">
            <div class="col-md-12">
                <form>
                    <input class="search" type="text" placeholder="Lookup symbol..." required>
                    <input name="Submit" class="button" type="submit" value="Search">
                </form>
            </div>
        </div>
    </div>
 <!-- end Logo + Social media and login + navbar + search bar-->

    <div class="frontpage">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-9">
                    <div class="headliner">
                        <h3>New releases</h3>
                        <p>Learn everything you need to know. <p>
                        <p><a href="#">Learn more</a></p>
                    </div>
                </div>  
                <div class="col-md-3">
                    <div class="ad1">
                        <h1>Ad</h1>
                    </div>
                </div>
            </div>  
        </div>  
    </div>  


    <footer>
        <div class="row">
            <ul class="top">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Sitemap</a></li>
            </ul>
        </div>
        <div class="row">
            <ul class="middle1">
                <li><a href="#">Advertise</a></li>
                <li><a href="#">Investor Relations</a></li>
            </ul>
        </div>
        <div class="row">
            <ul class="middle2">
                <li><a href="#">Application for Internship/Position</a></li>
            </ul>
        </div>
        <div class="row">
            <ul class="bottom">
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of use</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>
        </div>
        <div class="copyright">
            <p>2014<p>
        </div>
    </footer>


    </body>
</html>

CSS:

/* CSS code here */
htmlcsswhitespace

Answer №1

Here is a suggestion you might want to consider:

body {
    padding: 20px;
}

Answer №2

To achieve the desired layout, insert the following code snippet at the beginning of your CSS file:

html, body {        
    margin: 0;
    padding: 0;
}

To see the outcome of this code implementation, visit the link below: http://jsfiddle.net/abc123df/

We hope you find this solution helpful for your project!

Answer №3

It's important to wrap the div class "row"s within the footer with a surrounding div class "container".

Answer №4

If you are talking about the empty space between the div.frontpage and footer, then here is my solution:

.frontpage {
position: relative;
bottom: 50px;
}

To fix the issue, simply remove bottom:50px. bottom details

UPDATE

After considering the OP's feedback, I have revised my answer:

The problem lies in the negative margin specified in the following CSS rule:

.row {
margin-right: -15px;
margin-left: -15px;
}

To resolve the issue, eliminate the negative margin.

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

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

Tips for maintaining the position of items with absolute positioning while resizing:

Hello, I am seeking help with an issue in my code. My problem is as follows: I have two items and one frame. The frame has a position relative to the two items (children) which have positions set to absolute. Ideally, these children should always remain ...

htmlcss

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

I'm working with a table that includes 4 fields: service, amount, tax, and action. My challenge is to have the data from any row in the first table added to a second table when its checkbox is selected. The second table should have the same fields a ...

javascriptjqueryhtml

Fade out one div and then fade in a new one using Jquery

Hey there! I'm looking to create a smooth transition effect for my website where the content fades out when clicking on a menu item, and then fades in with the new content based on the link provided. Here's an example: . So basically, when I clic ...

jqueryhtmlhashfade

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

I'm currently facing a problem with ui-bootstrap's tabsets. I have one tab that is static (Other) and the rest are dynamically added using ng-repeat. The issue I'm having is that I can't seem to make the first dynamically loaded tab act ...

javascripthtmlangularjsangular-ui-bootstrap

Using jQuery along with PHP to handle request and response functionalities

I'm unsure of what exactly to search for, but I need a solution. The task at hand involves extracting text with ID's (#ftext_1,..._2,..._3,..._4) from an HTML file and sending them to a PHP file. Once manipulated in the PHP file, they must be in ...

phpjqueryhtmlajax

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

javascripthtmlcssp5.js

When attempting to execute a function when a hidden div is not displayed, JQuery encounters an

I'm currently attempting to modify the text color of the h2 title with the id ticketSearchTitle when the ticketSearch div is not visible. However, the code I have been using to achieve this seems to cause issues (such as the absence of a pointer icon ...

jquerycss

Designing Interactive Interfaces using React Components for Dynamic Forms

Is there a way to implement dynamic forms using React Components? For instance, I have a form displayed in the image below: How do I structure this as a React component? How can I incorporate interactivity into this component? For example, when the "+ A ...

htmlcsstwitter-bootstrapreactjs

CSS Selector for when a radio button is selected

I'm currently using images in place of radio buttons: <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick=" ...

htmlcss

What is the best way to assign a URL to an image source using a JavaScript variable?

I am working on a script that displays different image URLs based on the time of day using an if-else statement. I want to dynamically load these images in an img src tag so that a different picture is loaded for each time of day. I have defined variables ...

javascripthtmlsrc

Tips for adjusting the size of Bootstrap 5 card to fit various image sizes responsively

I am facing an issue where I have four images of different sizes placed in 4 cards in a row. Due to the varying heights of the images, the cards appear untidy. I am looking for a way to fix this problem while ensuring that the layout remains responsive. Be ...

htmlcssbootstrap-5

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...

javascriptjqueryhtmlcsscallback

Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent ...

htmlcssangularjsangular

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

jQuery navigation is experiencing issues due to conflicting buttons

I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and th ...

jqueryhtmlcss

Prevent page from reloading when Image Button is clicked

I attempted the following code: <asp:ImageButton ID="imgDropArrow" class="cssDropArrow" ImageUrl="~/Styles/Down.gif" OnClick="ImageDropArrow_Click" runat="server"/> Whenever I click on this image button, the page refreshes. What I'm looking ...

htmlasp.net

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

javascriptjqueryhtmlcss

Implementing email validation on the view layer for the yii framework using JavaScript

<script type="text/javascript"> function validate() { var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([ ...

javascriptphphtmlyii