Weird white line on React page

Question

I am having a weird white line displayed on my app but the devtool doesn't detect it. It is disappearing when I remove any of the page components I have on my app and I played around with borders, background color etc without effect. I have tried changing css styles of my index.scss yet nothing.

I have tried setting the background color and border to transparent or none for the components. I also tried setting the .App to 100vh or fit-content. Even * set to background color transparent hasn't had effect on the line. I checked on Chrome, edge and Safari, all with the same issue.

The code on App.js looks like this:

import AboutPage from "./components/About/AboutPage";
import ContactPage from "./components/Contact/ContactPage";
import CurriculumPage from "./components/Curriculum/CurriculumPage";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import HomePage from "./components/Home/HomePage";
import PortfolioPage from "./components/Portfolio/PortfolioPage";

function App() {
  return (
    <div className="App">
      <Header />
      <HomePage />
      <AboutPage />
      <CurriculumPage />
      <PortfolioPage />
      <ContactPage />
      <Footer />
    </div>
  );
}

export default App;

Here is the phone view: phone view Here is the desktop view: desktop view

As you can see the line isn't located at the same spot, and again, the only thing that will make it disappear is to comment out one of my components on App.js

Answer 1

I ran into the same problem. I don't know which element causes this. I found that only full CSS normalization in app.css works for me:

* {
  margin: 0;
  padding: 0;
}

Answer 2

Well actually I found out very long time ago that it was due to the background image I was using. I didn't try it much more and just replaced it with a background gradient, and it's gone. I assume some css would have solved it, but in the end I liked my background gradient better so I left it

Answer 3

I had the same problem, my problem is solved using:-

html, 
body {
  background: url("../public/bg.jpg");
  background-size: cover;
}