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; 
}