The css file linked to my html does not work correctly

Navigation
0

I'm trying new styles but when it comes to creating them in css it does not show me the expected result. Apparently I see the code correctly but I do not believe the 3 black boxes that this code should create.

HTML: 

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<div class="container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

STYLES: 

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

.container {
position: relative;
width: 1200px;
height: 300px;
margin: 240px auto;
}

.container .box{
position: relative;
width: calc(400px-30px);
height: calc(300px-30px);
background: #000;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
}

I have checked that you recognize the stylesheet correctly, but the styles of the "container" daughter class called "box" do not recognize the styles. If you need more information ask for it, please.

    
asked by Worbu 02.09.2018 в 01:08
source

2 answers

0

I'm not sure, if this is what you want to do: Try the example and explain something better what you think does not work for you, and how you want it to stay. 

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

.container {
background: blue;
position: relative;
width: 1200px;
height: 300px;
margin: 240px auto;
}

.container .box{
background: black;
width: 30%;
height: 90%;
float: left;
margin: 15px;
box-sizing: border-box;
border-radius: 10px;
}
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>
</body>
    
answered by 02.09.2018 / 02:37
source
0

I see two things; The first adds spaces to calc operators in the css: 

calc(400px - 30px)

Then, if you use the calc the recommendation is the use of percentages, if you have the values perform the calculation and place the value directly; 

width: 370px; /*calc(400px - 30px);*/
height: 270px;

Greetings,

    
answered by 02.09.2018 в 03:45
encode image in python Calculation of time differences in Java