カラムでCSSマージンが無視される

私は3カラムのレイアウトを持っています。しかし、私の第3列（私の最初の列に似ています）にはマージンとパディングの変更が必要です。残念ながら、私はそのコラムのマージンとパディングを調整できないようです。私は本当にその問題とグーグルが私に答えをもたらしているのか分からない。カラムでCSSマージンが無視される

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background: #ecf0f1; 
    color: #2c3e50; 
    font-family: "Georgia", serif; 
} 

h1, h2 { 
    font-family: "Franklin Gothic", sans-serif; 
} 

.header h1 { 
    background: #2c3e50; 
    color:#ecf0f1; 
    margin: 10px; 
    padding: 25px 15px; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
} 

.row { 
    margin: 0; 
    padding: 0; 
    font-size: 0; 
} 

.row div { 
    margin: 0; 
    padding: 0; 
    font-size: 18px; 
} 

.col-3 { 
    width: 25%; 
    display: inline-block; 

} 

.col-6 { 
    width: 50%; 
    display: inline-block; 
} 

.menu { 
    float: left; 
} 

.menu ul { 
    list-style-type: none; 
    margin: 10px 0px; 
    padding: 0; 
} 

.menu li { 
    background: #2980b9; 
    padding: 10px; 
    color: #ecf0f1; 
    padding: 10px; 
    margin: 5px 25px; 
    font-family: "Franklin Gothic", sans-serif; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
} 

.right { 
    float:right; 
} 

.right p { 
    margin: 10px; 
} 

.aside { 
    text-align: center; 
    background: #2980b9; 
    height: 390px; 
    color: #ecf0f1; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 

    /* THESE DO NOT WORK AND I CAN'T FIGURE OUT WHY */ 
    margin: 25px; 
    padding: 25px; 
} 

.footer { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

.footer p { 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    box-shadow: 2px 2px 5px 0px rgba(136,136,136,1); 
    padding: 50px 0px; 
    background: #2980b9; 
    text-align: center; 
    color: #ecf0f1; 
    margin: 10px 10px; 
}

HTML：

<html> 
<head> 

    <meta chrset="utf-8" /> 
    <title>CMST-290 Project 2</title> 
    <link rel="stylesheet" href="style.css"> 

</head> 
<body> 

<div class="header"> 

    <h1>Jacob Johnson</h1> 

</div> 

<div class="row"> 

    <div class="col-3 menu"> 

     <ul> 
      <li>Education</li> 
      <li>Software</li> 
      <li>Skills</li> 
      <li>Awards</li> 
      <li>Experience</li> 
      <li>Projects</li> 
     </ul> 

    </div> 

    <div class="col-6"> 

     <h1>Career Objective</h1> 
     <p> 
     I want to ensure quality in everything I do. I will work hard to achieve the goals my employer has for as well the goals I have set for myself. 
     </p> 

    </div> 

    <div class="col-3 right"> 
     <div class="aside"> 

      <h2>Developer</h2> 
      <p>I am familiar with front end tools such as HTML/CSS and JavaScript in addition to languages like C#, Python, and Java.</p> 

      <h2>Designer</h2> 
      <p>I have designed several websites from scratch.</p> 

      <h2>Student</h2> 
      <p>I am always eager to learn and keep improving my skills.</p> 

     </div> 
    </div> 

</div> 

<div class="footer"> 
    <p>Copyright &copy; 2017 | Jacob B. Johnson</p> 
</div> 


<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.6.10.5455-164 "></script> 
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { D2LMathML.DesktopInit('https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=MML_HTMLorMML','https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'); });</script> 

</body> 
</html>

CodePen link

任意の洞察力は、私はそう簡単に左端の列を調整することが可能であったが、いない理由として、素晴らしいだろう一番右端。ありがとう。 .row divセレクタはより具体的なので、ゼロにmarginとpaddingを上書きあるのでaside上

出典

2017-03-12 Jacob Johnson

何あなたは実際に達成したいですか？ –

あなたのHTMLコードを追加できますか？ – JustARandomProgrammer

がHTMLを追加しました。ありがとう。 –

あなたのスタイルが無視されています。

これを追加すると、それを動作させる必要があります：あなたはmargin: 0; padding: 0;と.row divを使用しましたので、あなただけの高い特異性を必要とする

.right .aside { 
    margin: 25px; 
    padding: 25px; 
}

出典

2017-03-12 20:34:38 gwcodes

。ですから、ルールが.row .col-3 { /* margin/padding *}

であるあなたが、ここで特異性についての詳細を読むことができるように、.col-3のようなセレクタの前に.rowを使用する必要があります、マージンやパディングの変更にそのCSSを上書きする - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

出典

2017-03-12 20:36:59

カラムでCSSマージンが無視される

答えて

関連する問題