My HTML + CSS site is showing a blank space on right and bottom of the screen while the margin is 0 on both bottom and right
Question
[![enter image description here][1]][1]
I've removed margin from all body sides. But as you can see the right margin is still there(in white). I've tried to set my navbar and front margin to 0 as well but nothing is working. The html and css code is provided below. I'm creating this website as a sample for my portfolio but there is a blank space on the right side and also on the bottom. I have no idea what is causing the space. I have tried changing all the margins to 0 and use only paddings but nothing is helping. I have tried to open the file in different browsers too but nothing. I'm new to coding and also new to stackoverflow. Your help will be much appreciated. Thanks.
Below is my css:
body {
margin: 0 0;
padding: 0 0;
}
/********************Navbar*************/
.navbar
{
background-color: #0f3057;
padding: 20px 100px 10px;
}
.nav-item {
padding: 0 10px;
font-size: 1rem;
font-family: 'Didact Gothic', sans-serif;
font-weight: 100;
}
.nav-name {
font-family: 'Antic Didone', serif;
font-size: 2rem;
}
/**************************************************Front*************************************/
.title-img{
width: 100%;
height: 100%;
}
.img-div {
padding: 50px 30px 50px 100px;
}
#Front-pg {
background-color: #00587a;
}
.txt-div {
padding: 70px 0 0 0;
color: white;
text-align: center;
}
h1 {
font-family: 'Antic Didone', serif;
font-size: 4rem;
}
.p1 {
line-height: 2rem;
padding-top: 30px;
font-family: 'Didact Gothic', sans-serif;
}
.p2 {
line-height: 2rem;
font-family: 'Didact Gothic', sans-serif;
}
/***********************************Timing*****************************/
#Timing {
background-color: #e7e7de;
}
.timing {
text-align: center;
padding-top: 40px;
}
.timing-photo {
width: 950px;
height: 500px
}
/************************************* Price *******************************************/
#Price {
background-color: #e7e7de;
padding-top: 40px;
text-align: center;
}
.Pricehead {
font-family: 'Antic Didone', serif;
}
.Menu {
text-align: left;
font-family: 'Didact Gothic', sans-serif;
}
/**************************************** mobile view ***********************************/
@media (max-width: 1020px) {
.title-img {
width: 450px;
height: 225px;
}
#Front-pg {
text-align: center;
}
}
Below is my html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ABC Saloon</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootscrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com"
<link href="https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-dark navbar-expand-lg">
<a class="navbar-brand nav-name" href=""><i>ABC Saloon</i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Gallery</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- Front Page-->
<section id="Front-pg">
<div class="row">
<div class="col-lg-6 img-div">
<img class="title-img" src="images/1265.jpg" alt="Saloon">
</div>
<div class="col-lg-6 txt-div">
<h1><i>ABC Hair Saloon</i> </h1>
<p class="p1">We're here to listen, educate and advise you on
what will work best for <br>you and your new look</p>
<br>
<p class="p2">Founded in 2000, AR Hair Salon 356 has grown to be the number one <br>Hair Salon in New York, committed to giving you the look you’ve <br>
always wanted. We have an extensive selection of services to choose
<br> from so you can get exactly what you need. Swing by and see how
<br> we can help today!</p>
</div>
</div>
</section>
<section id="Timing">
<div class="timing">
<img class="timing-photo" src="images/timg.png" alt="timing">
</div>
</section>
<section id="Price">
<h1 class="Pricehead"> <i>Price List</i> </h1>
<div class="Menu">
</div>
</section>
</body>
</html>
3 answers
solution1
0 2021-02-06 22:56:42
The problem is in the div with the class of row . if you take a look in _grid.scss file, you will find a rule-set for the class row . it contains margin-right: -15px; .
you just need to remove that margin.
to do that, you can override the margin property but you have to put in mind some roles such as selector-specificity and the place of your code.
the easiest way is to just insert this rule-set after the rule-set that you want to override Whether below it or in a file that is included after the _grid.scss file.
.row {
margin-right: 0 !important;
}
solution2
0 2021-02-06 23:06:02
Your body has 0 margin and no padding, just make sure the children are limited by that (body width):
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
overflow-x will limit overflowing on the x direction.
solution3
0 ACCPTED 2021-02-06 23:16:53
I am not sure what you are asking but I checked it and the problem comes from the bootstrap you have.
The Class 'row' you put under the section of Front-pg is giving you
margin-right: -15px
margin-left: -15px;
You can overwrite this one by adding a class row in your own CSS file:
.row{
margin: 0;
}
Just make sure that the CSS file you have is below the bootstrap stylesheet when linking the CSS in the HTML
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.