Using Full width isn’t working. | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

Using Full width isn’t working.

I assigned most div elements in my website with “width:100%” yet when I scroll it still shows empty white on the sides and it is not stuck to the edges as I would like it to be. How can I fix this? I am using HTML and css

4th Jun 2018, 3:33 AM
Kyle
Kyle - avatar
10 Answers
+ 7
Kyle put this (bootstrap 3) inside the head : <meta charset="utf-8"> <!-- Responsive --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
4th Jun 2018, 4:16 AM
***
+ 4
body { margin:0; } or *{ margin:0; } add this on css
4th Jun 2018, 3:53 AM
Sudarshan Rai
Sudarshan Rai - avatar
+ 1
Css: body{ margin: 0px; } Try this
4th Jun 2018, 3:53 AM
Rohit
Rohit - avatar
+ 1
Ahh it still wont work. Thank’s though! any other suggestions?
4th Jun 2018, 3:56 AM
Kyle
Kyle - avatar
+ 1
What's going on there is that there is an element that is positioned there, offscreen, with opacity: 0; so you can't see it. Normally that would trigger horizontal overflow and a horizontal scrollbar, but we're explicitly hiding it: body { overflow-x: hidden; } .hidden-thing { position: absolute; left: 100%; width: 50px; height: 50px; opacity: 0; }
4th Jun 2018, 4:30 AM
prachal goyal
prachal goyal - avatar
+ 1
If u can then just share your code maybe it will help to figure out the problem
4th Jun 2018, 4:35 AM
Rohit
Rohit - avatar
+ 1
kyle if your project is on github send me the link i can help you figure out the problem thought thing I mentioned above always work for me
4th Jun 2018, 4:44 AM
prachal goyal
prachal goyal - avatar
+ 1
body,*{ margine:0; padding:0; outlign:0; border:0; }
5th Jun 2018, 7:50 AM
Shahriar Ahmad
Shahriar Ahmad - avatar
0
Along with setting the margin to 0, you could also try setting the padding of all elements to 0: *{ padding: 0; margin: 0; }
4th Jun 2018, 4:15 AM
Faisal
Faisal - avatar
0
still not working :/
4th Jun 2018, 4:33 AM
Kyle
Kyle - avatar