https://i.sstatic.net/1PoMd.png
My image should explain the issue, but I'll provide more details. Lately, as I build my webpage, I've noticed an excessive amount of whitespace on the right side that serves no purpose for me. Despite my efforts to adjust element widths in both my HTML and CSS files, the whitespace stubbornly remains. I'm seeking assistance to eliminate this unnecessary space. Here's a snippet of my HTML code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet'>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div class="container-fluid" style="font-family: Actor">
<div class="row " style="position: absolute; z-index: 999; opacity:1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #FFFFFF; padding: 4px;">
<div class="col-xs-2">
<img src="images/1-OrderUp!!.jpg" alt="OrderUp logo">
</div>
<div class="col-xs-2">
<p class="text-style-1">OrderUp!!</p>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px; margin-left: 784px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg" style="width: 100px">Log in
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg">Sign Up
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
</div><br>
<div class="row">
<div class="col-xs-12" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%">
<div class="image">
<img src="images/home-1.jpg" style="width: 1350px;">
<p class="X">Welcome to OrderUp!!</p>
<p class="X_1"> Get food you love delivered at your doorstep!!</p>
<div >
<form class = "form-inline" class="srch_br"action="srch_location.php" method="post" enctype="multipart/form-data">
<input type="text" name="loc_srch" placeholder="Enter your location">
<button type="submit" class="btn btn-danger btn-md">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS rules are as follows:
.btn.btn-danger.btn-lg{
border-radius: 0;
height: 100px;
}
.text-style-1{
font-family:Actor;
font-weight: bold;
font-size:55px;
padding-top:2px;
padding-left:20px;
color: #511F18";
}
.image {
position: relative;
}
.X{
position: absolute;
top: 200px;
left: 820px;
width: 100%;
color: #FFFFFF;
font-size: 55px;
}
.X_1{
position: absolute;
top: 270px;
left:660px;
width: 100%;
color: #FFFFFF;
font-size: 35px;
}
.srch_br{
position: absolute;
top:400px;
left: 50px;
padding: 15px;
background-color: #FFFFFF;
}