Can someone help a CSS newbie out? I have a main section that then has a section inside of it. I need to center the 2nd section inside the main section. How can you do this? Here is my code.
.section1 {
border: 1px solid #CCCCCC;
padding: 10px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.section2 {
padding:10px; overflow:hidden;
margin-left: auto;margin-right: auto;
}
<section class="section1">
<section class="section2">
<div>
Registration Status
#Html.TextBoxFor(model => model.RegSts, new { disabled = true, size="10" })
Admitting Program
#Html.TextBoxFor(model => model.AdmProg, new { disabled = true, size="10" })
Academic Location
#Html.TextBoxFor(model => model.Loc, new { disabled = true, size="10" })
Division
#Html.TextBoxFor(model => model.Div, new { disabled = true, size="10" })
</div>
</section>
</section>
Related
I'm trying to make a reddit clone MERN and need a dropdown like the dorpdown in the reddit search bar
the styling is not an issue the issue is to make the dropdown appear when the input bar is focused
also i am using tailwindcss
can anyone please tell me how to do this?
I suppose you want to show the select not just when you focus the input but also when you are interacting with the select: you may avoid JS at all and use the :focus-within pseudoclass
.dropdown select {
display: none;
}
.dropdown:focus-within select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
but if you need this to be working only on input focus
.dropdown select {
display: none;
}
.dropdown input:focus + select {
display: block;
}
<div class="dropdown">
<input />
<select>
<option>option</option>
</select>
</div>
const show = () => {
document.querySelector('.content').classList.add("active")
}
const hide = () => {
document.querySelector('.content').classList.remove("active")
}
.dropdown{
display: flex;
flex-direction: column;
position: relative;
width: 200px;
}
input{
width: 100%;
}
.content{
background: red;
padding: 4px;
position: absolute;
top: 100%;
width: 100%;
display: none;
}
.active{
display: flex;
}
<div class = "dropdown">
<input onFocus = "show()" onBlur = "hide()" />
<div class = "content">
Dropdown
</div>
</div>
React and Tailwind
const Dropdown = () => {
const [isFocus, setIsFocus] = React.useState(false);
return (
<div className = "w-40 border m-4">
<input
className = "w-full"
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
/>
{ isFocus && <div className = "bg-red-300">Dropdown</div>}
</div>
);
};
I'm a visual artist with not that many coding skills. I know some HTML and some CSS but that's it. I like to create a webpage that does the following:
On the left, there is an image with lines. When hovering over a line the window on the right shows an image, movie, or plays a sound. Hovering over the next line triggers another image, movie, or sound.
Anyone can point me in the correct direction? I made a gif to show how it should work...
Simple solution:
Select HTML elements which we want to hover over (left, middle, right), and HTML elements which contain our images/videos/audio etc. (img1, sound, img2)
For every element you want to hover over, you need to add event listener (addEventListener), so you can manipulate your HTML/CSS code with JavaScript.
2.2 Inside each event listener you add or remove class: none, which has CSS value of display: none (this means element won't be shown), depending on what your goal is.
To make images disappear when we don't hover our cursor over the element, we need to again add event listener to elements which already have on mouseover event listener. In this case we use mouseover or blur. When cursor isn't on the element, JavaScript will automatically add none class to it.
const left = document.querySelector('.left-line');
const middle = document.querySelector('.middle-line');
const right = document.querySelector('.right-line');
const img1 = document.querySelector('.image-1');
const sound = document.querySelector('.sound');
const img2 = document.querySelector('.image-2');
left.addEventListener('mouseover', () => {
img1.classList.remove('none');
img2.classList.add('none');
sound.classList.add('none');
});
middle.addEventListener('mouseover', () => {
img1.classList.add('none');
img2.classList.remove('none');
sound.classList.add('none');
});
right.addEventListener('mouseover', () => {
img1.classList.add('none');
img2.classList.add('none');
sound.classList.remove('none');
});
left.addEventListener('mouseout',() => addNoneClass());
middle.addEventListener('mouseout', () => addNoneClass());
right.addEventListener('mouseout', () => addNoneClass());
function addNoneClass() {
img1.classList.add('none');
img2.classList.add('none');
sound.classList.add('none');
}
* {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
main {
display: flex;
width: 100%;
height: 100%;
}
section.left {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.line-container {
width: 150px;
height: 150px;
display: flex;
align-items: center;
border: 2px solid black;
}
.left-line, .middle-line, .right-line {
width: 50px;
height: 90%;
margin: 0 10px;
}
.left-line { background-color: green; }
.middle-line { background-color: red; }
.right-line { background-color: blue; }
section.right {
width: 50%;
display:flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
border: 2px solid black;
}
img {
width: 200px;
height: 200px;
}
.none {
display: none;
}
<main>
<section class="left">
<div class="line-container">
<div class="left-line">
</div>
<div class="middle-line">
</div>
<div class="right-line">
</div>
</div>
</section>
<section class="right">
<div class="box">
<div class="image-1 none">
<img src="https://play-lh.googleusercontent.com/aFWiT2lTa9CYBpyPjfgfNHd0r5puwKRGj2rHpdPTNrz2N9LXgN_MbLjePd1OTc0E8Rl1" alt="image-1">
</div>
<div class="sound none">
<img src="https://sm.pcmag.com/pcmag_uk/review/g/google-pho/google-photos_z68u.jpg" alt="sound">
</div>
<div class="image-2 none">
<img src="https://cdn.vox-cdn.com/thumbor/I2PsqRLIaCB1iYUuSptrrR5M8oQ=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/68829483/acastro_210104_1777_google_0001.0.jpg" alt="image-2">
</div>
</div>
</section>
</main>
You can do this by the following code example.
HTML:
<div class="lines">
<span id='line-1'>|</span>
<span id='line-2'>|</span>
<span id='line-3'>|</span>
</div>
<div id='output'></div>
JS
const line1 = document.getElementById('line-1')
const line2 = document.getElementById('line-2')
const line3 = document.getElementById('line-3')
const output = document.getElementById('output')
line1.addEventListener('mouseover', () => {
output.innerHTML = 'Content One'
})
line2.addEventListener('mouseover', () => {
output.innerHTML = 'Content Two'
})
line3.addEventListener('mouseover', () => {
output.innerHTML = 'Content Three'
})
My html page div element is getting changed when I restore down the browser but works fine when I maximize it.
when I click on the password field there is a pop-up window displayed to validate the password complexity and every time it will be displayed next to the password field in full screen mode but it will overlap when I click on password field in restore down mode.
I want that to be showed next to the password field in restore down mode also as how it works in full screen mode.
please help
Please find below the HTML and CSS code attached.
var check = function() {
if (document.getElementById('psw').value ==
document.getElementById('confirmPassword').value) {
document.getElementById('info').style.color = 'green';
document.getElementById('info').innerHTML = 'Matching';
} else {
document.getElementById('info').style.color = 'red';
document.getElementById('info').innerHTML = 'Not Matching';
}
}
function myFunction() {
var x = document.getElementById("psw"), y = document.getElementById("confirmPassword");
if (x.type === "password") {
x.type = "text";
y.type = "text";
} else {
x.type = "password";
y.type = "password";
}
}
var psw = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var symbol = document.getElementById("symbol");
// When the user clicks on the password field, show the message box
psw.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password field
psw.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(psw.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(psw.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers
var numbers = /[0-9]/g;
if(psw.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(psw.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
// Validate Symbols
var symbols = /[-!$%^&*()_+|~=`{}[:;<>?,.##\]]/g;
if(psw.value.match(symbols)) {
symbol.classList.remove("invalid");
symbol.classList.add("valid");
} else {
symbol.classList.remove("valid");
symbol.classList.add("invalid");
}
}
/* Style all input fields */
input {
width: 25%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 6px;
}
#myForm select
{
width: 25%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
float: left;
background: transparent;
color: #000;
position: absolute;
right: 0;
padding: -2000px;
margin-top: -120px;
margin-right: 200px;
}
#message p {
padding: 1px 35px;
font-size: 14px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "?";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor="#dbddea">
<h2 align="center"><u>Password Change</u></h2>
<p align="center"><marquee><h3>Change the password for unix users.</h3></marquee></p>
<div class="container">
<form>
<div id=myForm align = "center">
<label for="usrname">Select Username</label><br>
<select name="Users">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</div>
<div align= "center">
<input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
<br>
<div id="message" align = "left">
<h4>Password must contain the following:</h4>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
<p id="symbol" class="invalid">A <b>symbol</b></p>
</div>
<input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
<br>
<span id='info'></span>
<input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
</div>
<div align = "center">
<input type="submit" id="submit" value="Change Password">
</div>
</form>
</div>
</body>
</html>
Plz add this code..
css
#media only screen and (max-width: 1280px) {
#message {
position: relative;
float: none;
margin: 0;
width: 25%;
}
}
Plz modify your css code..
css
#message {
display:none;
width: 25%;
}
HTML
<div class="container">
<form>
<div id=myForm align = "center">
<label for="usrname">Select Username</label><br>
<select name="Users">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</div>
<div align= "center">
<input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
<br>
<input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
<br>
<div id="message" align = "left">
<h4>Password must contain the following:</h4>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
<p id="symbol" class="invalid">A <b>symbol</b></p>
</div>
<span id='info'></span>
<input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
</div>
<div align = "center">
<input type="submit" id="submit" value="Change Password">
</div>
</form>
</div>
Here are some changes to make it simple.
#message {
display:none;
float: left;
background: transparent;
color: #000;
position: absolute;
right: 0;
padding: -2000px;
margin-top: -120px;
margin-right: 200px;
}
Replace with below CSS
#message {
width: 25%;
}
Make changes in js code as below
psw.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
document.getElementById("message").style.display = "none";
}
Change to
psw.onfocus = function() {
$('#message').slideDown();
}
// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
$('#message').slideUp();
}
Learning React.js framework and need some pointers on styling. CSS isn't my forte.
How do I style the static content div in the middle and make it scrollable only within the div?
No styling:
https://i.imgur.com/26wNAfH.jpg
How to style this?
https://i.imgur.com/c5nYCOz.jpg
Here's the scroll function:
https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part%202.mp4
app.css
.name {
font-weight: bold;
font-size: 20px;
}
.centered {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
}
.content {
text-align: center;
border: 2px solid grey;
border-radius: 5px;
position: fixed;
/* center the div */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
/* just for example presentation */
top: 5em;
background-color: white;
}
Output: https://i.imgur.com/Eyv6hab.png
HTML:
import React, { Component } from "react";
import "../App.css";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const API = "https://www.hatchways.io/api/assessment/students";
class App extends Component {
constructor(props) {
super(props);
this.state = {
students: [],
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(API)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("Something went wrong ...");
}
})
.then(data =>
this.setState({ students: data.students, isLoading: false })
)
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { students, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<body>
<div className="content">
<div>
{students.map(student => (
<div key={student.id}>
<p>
<img src={student.pic} />
</p>
<p className="name">
{student.firstName} {student.lastName}
</p>
<p>Email: {student.email}</p>
<p>Company: {student.company}</p>
<p> Skill: {student.skill}</p>
<p>Average: {student.grades}</p>
</div>
))}
</div>
</div>
{/* <div class="card mb-3">
{students.map(student => (
<div class="row no-gutters">
<div class="col-md-4">
<img src={student.pic} class="card-img" alt="..." />
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">
{student.firstName} {student.lastName}
</h5>
<p class="card-text">
<p>Email: {student.email}</p>
<p>Company: {student.company}</p>
<p> Skill: {student.skill}</p>
<p>Average: {student.grades}</p>
</p>
</div>
</div>
</div>
))}
</div> */}
</body>
);
}
}
export default App;
This might not help I am unfamiliar with that JS framework. I am only posting this because nobody has answered and maybe this can help.
<style>
scroll
{
max-height: 400px;
overflow-y: scroll;
}
</style>
<div class="scroll">
I noticed every time I try to make a nav bar I have a left and top margin of about 8px that is just there.. I have no idea where this came from as my css file is small and I do not have that code anywhere. I'm beginning to think it's some type of standard and perhaps I am doing it all wrong. How would I overcome this problem? I added a -8px margin to the left and top of the tool bar and it is now flush with the browser; however, now there is empty space if the user horizontally scrolls to the right.
CSS
body {
}
.navbar-container {
width: 100%;
background-color: #252122;
/*margin-left:-8px;
margin-top:-8px;*/
}
.navbar-container table {
width: auto;
}
.classifieds-container {
overflow: hidden;
z-index: -1;
top: 40px;
left: 0;
right: 0;
display: block;
width: 960px;
padding-bottom: 25px;
background: #fff;
box-shadow: 1px 0 7px;
font: 11px "Arial",sans-serif;
color: #000;
/*line-height: 59px;*/
}
.classifieds-container label {
color: blue;
}
.classifieds-container label:hover {
color: red;
text-decoration: underline;
}
.classifieds-container table {
width: 960px;
}
.classifieds-container .col {
float: left;
margin-left: 15px;
}
.col-one {
margin-top: 60px;
float: left;
margin-left: 200px;
max-width: 175px;
text-wrap: normal;
}
.col-one h3 {
text-align: center;
}
.row-splitter {
border-bottom: solid;
border-width: 1px;
border-color: gray;
margin-top: 5px;
margin-bottom: 5px;
}
.classified-link-descriptor {
color: gray;
text-decoration: none;
font: 11px "Arial",sans-serif;
margin-bottom: 5px;
display: block;
}
nav {
display: block;
}
.logo-header {
height: 35px;
width: auto;
float: right;
}
HTML
<body>
<nav>
<div id="Navigation">
<div class="navbar-container">
<table>
<tbody>
<tr>
<td colspan="2">
<img class="logo-header" src="~/Content/logo_black_background.png" />
</td>
<td colspan="6">
<div>
#(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add()
.Text("Home");
items.Add()
.Text("Classifieds")
.Content(#<text>
<div class="classifieds-container">
<div id="col1" class="col">
<div id="col1-row1">
<h2>Auto</h2>
</div>
<div class="row-splitter">
</div>
<div>
#*#Html.ActionLink("Custom Builds", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Build }, new { #class = "classified-link" })*#
<label id="Custom-Builds">Custom Builds</label>
<div class="classified-link-descriptor">Modified vehicles ready to drive</div>
#*#Html.ActionLink("Shells", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Shell }, new { #class = "classified-link" })*#
<label id="Shells">Shells</label>
<div class="classified-link-descriptor">Non-running vehicles for parts</div>
#*#Html.ActionLink("Stockers", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Stock }, new { #class = "classified-link" })*#
<label id="Stockers">Stockers</label>
<div class="classified-link-descriptor">Stock vehicles ready to drive</div>
#* #Html.ActionLink("All Types", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.AllTypesOfVehicles }, new { #class = "classified-link" })*#
<label id="All-Types">All Types</label>
<div class="classified-link-descriptor">Browse all types of vehicles in one search</div>
#* #Html.ActionLink("By Year, Make, & Model", "VehiclesByMake", "Browse", null, new { #class = "classified-link" })*#
<label id="YearMakeModel">By Year, Make, & Model</label>
<div class="classified-link-descriptor">Search by specific year, make, and model</div>
</div>
</div>
<div id="col2" class="col">
<div id="col2-row1">
<h2>Parts</h2>
</div>
<div class="row-splitter">
</div>
<div class="auto-links">
<label id="Browse-all-parts">Browse all parts</label>
#*#Html.ActionLink("Browse all parts", "Index", "ResultsList", null, new { #class = "classified-link" })*#
<div class="classified-link-descriptor">Browse all parts with no discrimination!</div>
<label id="Browse-by-vehicle-application">Browse by vehicle application</label>
#*#Html.ActionLink("Browse by vehicle application", "PerformancePartsByVehicle", "Browse", null, new { #class = "classified-link" })*#
<div class="classified-link-descriptor">By year, make, and model</div>
#*#Html.ActionLink("Browse by part category", "PerformancePartsByCategory", "Browse", null, new { #class = "classified-link" })*#
<label id="Browse-by-part-category">Browse by part category</label>
<div class="classified-link-descriptor">By category (e.g. turbos, intake, engine builds, etc.)</div>
#*#Html.ActionLink("Browse by part manufacturer", "PerformancePartsByManufacturerLetter", "Browse", null, new { #class = "classified-link" })*#
<label id="Browse-by-part-manufacturer">Browse by part manufacturer</label>
<div class="classified-link-descriptor">By manufacturer (e.g. Blouch, Stance, K&N, AEM, etc.)</div>
</div>
</div>
<div id="col3" class="col">
<div id="col3-row1">
<h2>Wheels</h2>
</div>
<div class="row-splitter">
</div>
<div class="auto-links">
#*#Html.ActionLink("Browse all wheels", "Index", "ResultsList", null, new { #class = "classified-link" })*#
<label id="Browse-all-wheels">Browse all wheels</label>
<div class="classified-link-descriptor">Browse all wheels with no discrimination!</div>
#*#Html.ActionLink("Browse by size", "PerformancePartsByVehicle", "Browse", null, new { #class = "classified-link" })*#
<label id="Browse-by-size">Browse by size</label>
<div class="classified-link-descriptor">15", 18" x 11.5", 19" x 12.5" etc.</div>
#* #Html.ActionLink("Browse by manufacturer", "PerformancePartsByCategory", "Browse", null, new { #class = "classified-link" })*#
<label id="Browse-by-manufacturer">Browse by manufacturer</label>
<div class="classified-link-descriptor">By manufacturer (e.g. Volk, Ray's, Work, Enkei, etc.)</div>
#*#Html.ActionLink("Tires only", "PerformancePartsByCategory", "Browse", null, new { #class = "classified-link" })*#
<label id="Tires-only">Tires only</label>
<div class="classified-link-descriptor">Tires only! No rims here!</div>
</div>
</div>
</div>
</text>);
items.Add()
.Text("Search")
.Items(children =>
{
children.Add().Text("Showroom");
children.Add().Text("JDM gear heads");
});
items.Add().Text("Discussions");
//if (WebSecurity.IsAuthenticated)
//{
// items.Add().Text("Account");
//}
//else
//{
// items.Add().Text("Sign In");
// items.Add().Text("Register");
//}
}
))
</div>
</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</nav>
<div>
#RenderBody()
</div>
add below in css.
body, html {
margin: 0;
padding: 0;
}
As others have already stated, setting a margin of 0 on the body will do the trick. I just wanted to explain little further.
The margin: 8px declaration is the default User Agent (in this case Chrome browser) styling. There is nothing stopping from another browser to implement another different default styling value. Best practice is often is to use a reset CSS which will reset the default browser CSS to the same values so you can start your development with a consistent base styling. NormalizeCSS is one of many good options. If you look into its contents it has among many other useful declarations:
/**
* Remove default margin.
*/
body {
margin: 0;
}
By default body take 8px margin so you have to give margin:0 in body
body, html {
margin:0;
}
body has default margins on all browsers
So you should have
body, html {
margin:0;
padding: 0;
}
OR
body, html {
margin:0;
padding: 0;
overflow-x:hidden;
}
OR
* {
margin: 0;
padding: 0;
}