instead of having a margin of the right side because of the margin placed on .nav, it just covers the whole area.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--secondary);
color: var(--font-color);
background-image: url(3ca749da0b938c6392de6488c28b11c8.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
nav {
position: fixed;
display: flex;
background-color: var(--primary);
width: 100%;
margin: 5 14 5 14 ;
overflow: hidden;
padding: 7;
overflow-x:
}
Two reasons:
Your CSS is invalid. Lengths require units unless they are 0.
With a width of 100% the left margin will apply, push the element to the right, then the right-hand edge and right margin will be off-screen to the right.
You haven't provided any scale for your margins try putting:
nav {
margin: 5px 14px 5px 14px;
}
this is applying to all you haven't noticed the * *{margin: 0;padding: 0;box-sizing: border-box; }
firstly remove this and add unit like this nav{margin: 5px 14px 5px 14px;}
Related
I have a static html page, unfortunately when when I run my page and check responsiveness, I see white space on the right side of of my page, I followed many solution here in stack overflow by adding the following code:
inline I tried to add
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
but this didn't work. I tried to add this in my CSS file:
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
also didn't work. here is the page I am building: demo
What is wrong with my page?
The issue is due to the .Navbar element which exceedes the 100% of the viewport
Since its left offset is 30px instead of width: 100% set to width: calc(100% - 30px) (or alternatively, set left: 0) and rearrange the space/size of the inner elements
Add position: relative in your css body and "!important" in your margin see code below.
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0 !important;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
}
Then move your menu a little bit to the right use this update your .main-banner set the new value for padding
.main-banner {
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
padding: 20px 65px;
How do I get rid of all of this white space so everything will touch each other?
I'm building a site for a friend for free just for the exp. So yes, I know it looks novice. Here is everything:
http://jsfiddle.net/e2p3pwtb/embedded/result/
h1{
background-image: url(silver-955496_960_720.jpg);
padding-bottom: 0;
}
#mainnav{ background-image: url(silver-313347_960_720.jpg);}
body {
margin: 0;
text-align: center;
}
.sidebar1{
float:left;
width: 20%;
padding: 0 20px 0 10px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-image: url(silver-313347_960_720.jpg);}
.sidebar2{
float: right;
width: 20%;
padding: 0 10px 0 20px;
background-image: url(silver-955496_960_720.jpg);
background-repeat: repeat-y;
height:650px;}
/*This will keep you from having "float drops"*/
*{box-sizing: border-box;}
Some elements have margins by default. In your fiddle, add
h1, p, ul {margin:0}
http://jsfiddle.net/MrLister/e2p3pwtb/1/
Or, more thorough,
* {margin:0}
which I can't really recommend though. Things like that change the appearance too much from its natural state.
My issue is that I made a pretty big html page oriented on 125% browser zoom,
however when I put it in 100% all the position's and margin's start to change, thus breaking my html page awfully.
html { width: 100%; height: 280%; margin: 0; padding: 0; }
body { margin: 0 ; padding: 0; background: url(Photoshop/img/header_bg.png),url(Photoshop/img/full_bg.png); background-size: 1600px 655px,cover; background-repeat: no-repeat, no-repeat; }
header h1 { float: left; margin: 28px 0 0 220px; }
nav ul { list-style-type: none; float: right; }
nav li { float: right; margin: 53px 20px 50px 0px; text-transform: uppercase; }
What is the best way to fix the problem, without change every single piece of css code( margins position top right, e.t.c).
I have notoced you are using fixed values in your margins.
Try to use presentage, if that dont work use the #media in css to handle different sizes.
Margin example - margin-top: 10%;
I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
I am trying to make a menu bar. The container is called: #menu and has the following CSS: border: 0px;
margin: 0 auto;
position: relative;
display: inline-block;
width: 100%;
The problem is that when I set the width of the menubars to 12.5%, they leave space on the side. Sorry but I can't show the real contents so I'm giving this image: https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png . The CSS for the menu_bars is: width: 12.5%;
float: left;
padding: 25px 18px 25px 18px;
background: rgba(237, 157, 28, 0.992157);
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 15px;
height: 20px;
You need to declare this for the .menu_bar_item:
.menu_bar_item {
box-sizing: border-box;
/* more styles */
}
http://jsfiddle.net/teddyrised/eWNSz/1/
The box-sizing: border-box property prevents padding from adding onto the width (that is the default behavior, anyway). With this property declared, you will need to look into adjusting your height property, too.
You should set the left padding to 20px.