CSS设计，显示文字对齐更多

Question

.read-more-state { 
 
    display: none; 
 
} 
 
.read-more-wrap { 
 
    width: 100%; 
 
} 
 
.read-more-target { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .5s ease; 
 
    width: 100%; 
 
} 
 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 
.read-more-state ~ .read-more-trigger:before { 
 
    content: 'Our Story'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    content: 'Close'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-trigger { 
 
    padding-left: 450px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    color: #666; 
 
    font-size: .9em; 
 
    line-height: 2; 
 
} 
 
.am-content-container { 
 
    max-width: 1100px; 
 
    margin: auto; 
 
} 
 
.hcentered { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.pure-g { 
 
    text-rendering: optimizespeed; 
 
    font-family: 'Roboto', sans-serif; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.pure-g > * { 
 
    box-sizing: border-box; 
 
} 
 
.pure-u { 
 
    zoom: 1; 
 
    display: inline-block; 
 
    word-spacing: normal; 
 
    letter-spacing: normal; 
 
    text-rendering: auto; 
 
    vertical-align: top; 
 
} 
 
.image-row { 
 
    margin-bottom: 0px; 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-sizer, .grid-item { 
 
     width: 16.67%; 
 
    } 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-item.col-2 { 
 
     width: 33%; 
 
    } 
 
} 
 
.bot { 
 
    margin: 0 10px 20px 10px; 
 
    pointer-events: all; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 
.text-justified { 
 
    color: #777; 
 
} 
 
h4 { 
 
    padding-left: 50px; 
 
    text-transform: none; 
 
    font-weight: 300; 
 
    line-height: 1.8em; 
 
    font-family: 'Roboto', sans-serif; 
 
    margin: 1.33em; 
 
    padding-bottom: 20px; 
 
}

<div class = "pure-g hcentered"> 
 
    <div class = "pure-u-1 pure-u-md-1-12"> 
 
    </div> 
 
    <div class = "pure-u-1 pure-u-md-5-6"></div> 
 
    <h4 class = "text-justified gray"> 
 
    <b>Molecular simulations simplified</b>. Macromoltek's mission is to provide easy-to-use scientific software. Our vision is to help researchers make new discoveries       by keeping the focus on their science. 
 
    <br> 
 
    <br> 
 
    <b>About our products:</b> 
 
    <br> 
 
    <br> 
 
    Macromoltek provides an Online Workspace for Antibody Analysis and Modeling. 
 
    We help researchers analyze potential antibody drug targets. We do this by providing users a web interface to our bioinformatics and molecular modeling software:       SmrtMol. 
 
    <input type="checkbox" class="read-more-state" id="post-2" /> 
 
    <ul class = "read-more-wrap"> 
 
     <p class = "read-more-target" style = "list-style: none;"> <br><br>Macromoltek was founded in fall of 2010 by Monica Berrondo (current CEO) to address the        growing need for easy-to-use antibody modeling software. After overcoming some roadblocks in getting started, she started development of a novel structure prediction      software package in spring of 2011. Shortly thereafter, Susana Kaufmann (current CFO) joined Macromoltek to help with the                 everyday operations and software development and testing. They worked tirelessly over the next 6 months to develop, test, and                benchmark an algorithm for predicting structures of antibody sequences. This website, www.macromoltek.com was launched at the end               of 2011 as the primary graphical user interface to all of Macromoltek's products and services.</p> 
 
    </ul> 
 
    <label for="post-2" class="read-more-trigger"></label> 
 
    </h4> 
 
</div>

我似乎无法弄清楚这一点，但我有我的代码设计缺陷，它已被窃听我。

的问题

当我点击显示更多的项目，它显示的文本，但不与以前text.So对准当我点击更多的显示，它应该充满对UL的宽度在h4中，但它设置了自己的盒子，不管我做什么<p>，其中的文本不想继承到ul父项的宽度。有任何想法吗？

Answer 1

尝试：

.read-more-wrap { 
    padding: 0; 
}